Question

我正在尝试在内容div中创建一个包含两个div的页面作为列。虽然我知道这是一个经常被问到的问题，但不同的是，我需要左边是右边相应内容的标题，但是右边的内容会区分高度，我需要这个影响左下方标题的出现位置。

下面是我希望如何工作的图像，以及我猜测它是如何完成的？ http://i.stack.imgur.com/aY8bt.png

目前我正在使用HTML表格，我们都知道它是凌乱的！

非常感谢提前！

迪伦

Answer 1

尝试这个

table
{
    border:none;
}
table td:first-child
{
    border-right:2px solid #000;
    text-align:right;
}
table td
{
    padding:10px;
    vertical-align:top;
    min-width:100px;
}

http://jsfiddle.net/GRX99/2/

Answer 2

没有桌子，我们可以这样做：

<div id="master">
    <div class="title">TITLE A</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
    <div class="magicClear"></div>
    <div class="title">TITLE B</div>
    <div class="content">Tiny content with tiny height</div>
    <div class="magicClear"></div>
    <div class="title">TITLE C</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac velit risus. Donec et libero erat. Pellentesque eros libero, lobortis eu diam accumsan, commodo tincidunt diam. Integer nec tincidunt dui.</div>
    <div class="magicClear"></div>
</div>

css：

#master {
    width: 650px;
    margin: auto;
}
.title {
    float: left;
    width: 100px;
}
.content {
    width: 450px;
    padding-left: 100px;
    margin-bottom: 20px;
}
.magicCLear {
    clear: both;
}

http://jsfiddle.net/djedjex/GU7RW/1/

Answer 3

如果您使用了表格标签，则可以将它们变成常规标签并使用display：table / table-cell：

演示：http://codepen.io/anon/pen/aEBkA HTML BLOCK为您的标题＆gt;内容。尽可能多地使用。

<article>
  <h1>titre</h1>
  <div>
    <p>text</p>
    <p>and text again</p>
  </div>
</article>

和最小的CSS：

article {
  display:table;
  table-layout:fixed;
/* tune next 2 rules */
  width:80%;
  margin:auto;
}
article h1,
article div {
  display:table-cell;
  padding:0.5em;
}
article h1 {
  width:15%;
  border-right:solid;
}

Answer 4

你也可以做一些流畅的，Bootstrap的灵感。

<div>
  <div class="row">
    <div class="span2">
      <p>Title A</p>
    </div>
    <div class="span10">
      <p>Very long content</p>
    </div>
  </div>
  <div class="row">
    <div class="span2">
      <p>Title B</p>
    </div>
    <div class="span10">
      <p>Another very long content</p>
    </div>
  </div>
</div>

CSS：

[class*="span"] {
  float: left;
}
.span2 {
  width: 20%;
}
.span10 {
  width: 80%;
}
.span2 p {
  float: right;
}

你必须调整边距/填充，但就是这样。

两个列DIV随内容扩展

4 个答案: