html 如何合理布局,HTML – 如何组成这样的布局？

这里的第一张图片是由网页设计师创建的草稿.

这里的第二个图像是我为此创建正确的HTML / CSS布局的结果.

问题是：如何使用适当的HTML5和CSS在评级药片周围创建这个透明字段.解决方案必须是跨浏览器和超级兼容(包括IE7和更高版本).

评级药丸宽度不固定,取决于其内部的数量,因此透明区域必须反映这一点.

这是我目前的布局：

10,950

+100500

Lorem ipsum dolor

Donec et

24.08.2012 10:53

Nunc pellentesque justo diam,sed dictum dolor.

减：

div.evo-module-c4b {

position: relative;

width: @module-big-width;

height: 250px;

background-color: @color-gray-1;

background-position: 0 0;

background-repeat: no-repeat;

overflow: hidden;

div.price {

position: absolute;

top: 18px;

right: 24px;

span.icon {

display: block;

float: left;

width: 16px;

height: 16px;

background-image: url('/i/evo/icons-imageset.png');

background-position: -20px 0;

background-repeat: no-repeat;

}

span.value {

display: block;

float: left;

margin-left: 4px;

font-size: 18px;

font-weight: bold;

color: @color-white;

}

}

div.die {

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 108px;

background-color: @color-gray-10;

//background-image: url('/i/evo/modules/c4b/die.png');

background-position: 0 0;

background-repeat: no-repeat;

z-index: 0;

}

div.rating-wrapper {

position: absolute;

width: 100%;

top: 122px;

text-align: center;

div.evo-rating {

display: inline-block;

}

}

div.content {

position: absolute;

left: 0;

top: 172px;

width: 100%;

z-index: 1;

h2,h3,p {

margin: 0;

padding: 0;

line-height: normal;

text-align: center;

}

h2 {

font-size: 18px;

font-weight: bold;

}

p.author {

font-size: 12px;

font-weight: bold;

}

p.data {

font-size: 10px;

color: @color-gray-4;

}

h3 {

font-size: 12px;

color: @color-gray-4;

}

}

}

div.evo-rating {

span.value {

.evo-border-radius(@rating-height / 2 + 3px);

display: block;

height: @rating-height;

font-size: 18px;

font-weight: bold;

line-height: @rating-height;

color: @color-major;

background-color: @color-white;

border: 3px solid @color-major;

padding: 0 5px;

}

}

有什么建议？ )