0

我想做这个：

在此处输入图像描述

这是我到目前为止的 HTML/CSS，但是在尝试了浮动、绝对/相对位置、左边、左边距、清除、溢出等的各种组合之后。我无法让它处理不同的长度。

<!DOCTYPE html> 
<html>
<head>
    <style>
        .container {
        }
        .leftColumn {
            float:left;
        }
        .rightColumn {
            float:left;
            left:120px;
            position:absolute;
        }
        .clear {
            clear:both;
        }
    </style>
</head>
<body>
  <div class="container">
        <div class="leftColumn">Apr 14: Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 15: Another Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>
  <div class="container">
        <div class="leftColumn">Apr 16: A Still Longer Title: </div>
        <div class="rightColumn">This is a text that will have a variable width, sometimes short and sometimes very, very long, sometimes short and sometimes very, very long.</div>
        <div class="clear"></div>
  </div>

</body>
</html>

我必须对上面的 CSS 进行什么更改，以便它处理两列中的可变长度文本，如上面的屏幕截图所示？

4

1 回答 1

3

看到这个小提琴：http: //jsfiddle.net/UHMtW/

1）删除所有那些可怕的空div以清除浮动（只需使用easyclearing或其他一些非结构等效技术）

2）你错过了所有</div>的关闭.rightColumn

3）使用这个css代码[更新]

.container {
     height: auto; overflow: hidden; width: 100%;
     margin : 0 0 20px 0;
 }
 .leftColumn {
     float:left;
     width : 120px;
 }
 .rightColumn {
     margin-left: 120px;   
 }

当然可以根据需要更改元素的宽度并为元素留出一些.container边距

（顺便说一句，我建议改用描述列表<dl>，但这需要为左列设置最大高度。或者，也许您可​​以<div>ification正确使用标题和段落来避免所有这些）

于 2012-04-04T15:27:14.060 回答