0

我正在尝试做类似图像中的事情。容器（包含所有三个灰色矩形）是窗口宽度的 100%。无论我做什么，当容器太长时，标题和描述都会移到容器的左侧。

我希望图像（将是固定宽度）始终位于左上角。标题和描述应保持在如图所示的矩形范围内，并且在调整大小时，它们的宽度应随着窗口的大小而扩大。

这是小提琴http://jsfiddle.net/hHjeH/

所需的 CSS 布局 HTML

<div class="container clearfix">
    <div class="image">
    </div>
    <div class="subcontainer clearfix">
        <div class="title clearfix">
            Title
        </div> 
        <div class="description">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
        </div>
    </div>
</div>

CSS

.container 
{
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color:#eee;
}
.image 
{
  width: 100px;
  height: 100px;
  background-color:#888;
  float: left;
}
.subcontainer 
{
  margin: 20px 0px 20px 20px;
  float: left;
}
.title 
{
  font-size:20pt;
  font-weight:bold;
  padding: 0px 0px 10px 0px;
}
.description 
{
  margin-left: 10px;
}
/* For modern browsers to clear floats */
.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
   clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.clearfix {
  zoom:1;
}​

​</p>

4

1 回答 1

3

浮动图像，而不是.subcontainer. 并垫.subcontainer比图像更宽。

像这样：http: //jsfiddle.net/hHjeH/2/

于 2012-11-12T10:35:54.777 回答