0

私は画像のようなことをしようとしています。コンテナー (3 つの灰色の四角形すべてを含む) は、ウィンドウの幅の 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 に答える