CSS布局问题+样本图片

我正在尝试做像图片中的东西。容器（包含全部三个灰色矩形）是窗口宽度的100％。无论我做什么，标题和描述都会在容器太长时转移到容器的左侧。CSS布局问题+样本图片

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

Desired CSS Layout 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; 
}

来源

2012-11-12 Dex

给一个小提琴链接....或张贴您的代码，如果你写。 –

我认为你可以使用更简单的方法：从'.subcontainer'中删除'float：left'并使其左边距大于图像宽度。 http://jsfiddle.net/hHjeH/1/ – Aziz

'padding-left'将是避免IE中布局问题的一种更安全的方法，但本质上，是的！：{D – Labu

浮动的形象，而不是.subcontainer。并且将.subcontainer填充得比图像更宽。

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

来源

2012-11-12 10:35:54 Labu

使用这种方法，标题至少与图像一样高。 – Dex

没有。标题和你设定的一样高。 – Labu

我必须缺少一些东西http://jsfiddle.net/hHjeH/3/ – Dex

CSS布局问题+样本图片

回答

相关问题