使用div並排對齊內容

Question

我有兩個div。一個div表示標題內容，其他div表示詳細內容。我希望兩個div的內容並排排列。正確的div的內容（即細節）應該始終顯示在右側。如果詳細內容不適合，則extra內容應顯示在下一行。像下面的那樣，File4.pdf和File5.pdf不適合，所以它轉到下一行。

我能做到這一點使用table，但我想用div，而不是表。但是當內容不適合時，使用div整個內容移動到下一行。

這裏是JSfiddle

Answer 1

您需要在右側元素的容器，與下面的樣式

float:left; 
width:calc(100% - 222px); /*the -222px is the width of the left element + the padding + the margin*/ 
overflow:hidden; 

---

完全更新的例子（從所提供的jsfiddle ）

dl { 
 
    margin-bottom: 30px; 
 
} 
 
dl dt { 
 
    float: left; 
 
    font-weight: bold; 
 
    margin-right: 2px; 
 
    width: 200px; 
 
} 
 
dl dd { 
 
    margin: 2px 0; 
 
} 
 
.details-container { 
 
    float: left; 
 
    width: calc(100% - 222px); 
 
    overflow: hidden; 
 
}

<div style="float:left;padding-right:20px;"> 
 
    <dl> 
 
    <dt>Name:</dt> 
 
    <dd>Foo Bar</dd> 
 
    <dt>Date:</dt> 
 
    <dd>01/04/2017</dd> 
 
    </dl> 
 
</div> 
 
<div class="details-container"> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File1.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File2.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File3.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
    <div style="float:left"> 
 
    <dl> 
 
     <dt>File Name:</dt> 
 
     <dd>File4.pdf</dd> 
 
     <dt>Page Count</dt> 
 
     <dd>10</dd> 
 
    </dl> 
 
    </div> 
 
</div>

Answer 2

你應該更準確地知道你想要什麼，因爲有很多不同的方法可以實現這個目標，這取決於每個細節的每行元素數是否固定，如果你想要的話有反應能力，還是屬於固定大小元素的其他東西的一部分？如果div中的任何列表變得太大，你想要出現卷軸嗎？

這裏有一些線索：

• 由加比又名G. Petrioli說，你很可能需要一個或兩個你的div周圍的包裝DIV做你想要
• 如果高度是什麼的一行是固定的，當內容到達一個新行時，你不需要關心滾動條，只需將兩個div的高度設置爲相同的值，並使用'overflow：scroll'。如果您仍然有固定的高度線但想要顯示不適合顯示的項目，您可以選擇使用特定的「overflow-x：scroll」或「overflow-y：scroll」來滾動條是水平還是垂直。
• ，仍然定義尺寸，添加「溢出：隱藏」。通過這種方式，包裝div中的所有內容都將消失。
• 當一個維度被設置，而不是另一個，比如在Gaby（又名G.Petrioli示例）中，使用'overflow：hidden'可以修復當浮動內容到達新的時候包裝div沒有更新維度的事實如果你希望項目被強制爲每行一定數量（每個「tile」的內容被強制調整大小或滾動），你將需要一個佈局以％定義的元素。這將是更棘手，需要一個更精確的問題是完全負責..

Answer 3

FlexBox？

<div class="container"> 
<div class="left"> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value asd asd as das d</div> 
    </div> 
</div> 
<div class="right"> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value asd asd as</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value adasd</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value</div> 
    </div> 
    <div class="item"> 
    <div class="title">Title</div> 
    <div class="value">Value</div> 
    </div> 
</div> 
</div> 

.container { 
    display: flex; 
} 

.item { 
    padding-bottom: 30px; 
} 

    .container .left { 
    display: flex; 
    align-items: center; 
    padding-right: 50px; 
    } 
    .container .right { 
     display: flex; 
     width: 70%; 
     flex-wrap: wrap; 
    } 

    .container .right .item { 
     width: 30%; 
    } 

工作例如https://jsfiddle.net/494wrsyo/2/