兩列DIV與內容擴展

我試圖創建一個頁面與內部div內的兩個div作爲列。雖然我知道這是一個經常被問到的問題，但區別在於，我需要將左側作爲右側相應內容的標題，但右側的內容將在高度上進行區分，並且我需要以影響左側下一個標題的出現位置。兩列DIV與內容擴展

下面是我想如何工作的圖像，以及我如何猜測它可以完成？ http://i.stack.imgur.com/aY8bt.png

目前我正在做這個HTML表格，我們都知道這很麻煩！

非常感謝提前！

迪倫

來源

2014-01-18 user3209437

把你的代碼或使小提琴 – radha

正如我所說，這是一個簡單的HTML表，就是這樣。沒想到我需要補充一點，因爲每個人都知道它是什麼。 – user3209437

不表，我們可以做這樣的：

<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/

來源

2014-01-18 09:59:00 jmercier

非常感謝！這是我需要的解決方案！ – user3209437

試試這個

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/

來源

2014-01-18 09:56:45 radha

，如果你使用的表標籤，你可以把它們變成正規標籤和使用顯示：表/表單元格：

演示：http://codepen.io/anon/pen/aEBkA HTML塊您的標題>的內容。根據需要使用盡可能多的。

<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; 
}

來源

2014-01-18 10:05:36

你也可以做一些流體，引導啓發。

<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; 
}

你必須調整頁邊距/墊襯，但僅此而已。

來源

2014-01-18 10:14:25 mauricius

兩列DIV與內容擴展

回答

相關問題