CSS浮動DT/DD留在對

Question

我有以下的html代碼：

<dl> 
    <dt>term1</dt><dd>defn1</dd> 
    <dt>term2</dt><dd>defn2</dd> 
    <dt>term3</dt><dd>defn3</dd> 
</dl> 

我試圖讓他們在對（相同的寬度）浮動，與所有的dt回事第一線第二個是所有的dd。

像這樣：

term1 term2 term3 
defn1 defn2 defn3 

我已經試過各種顯示器的組合：塊（+浮動/清除），內聯塊，表 - *，彎曲，但沒有附帶的任何親密。

任何想法它可以做什麼？

Answer 1

這裏有一個。基本上只需使用nth-child僞選擇器來定義dl的子級的順序。不幸的是，這裏使用的calc()方法依賴於知道列表中的子女數量（在我的示例中爲4）。

只需CSS你真的不能確定孩子的數量，但你可以指望的兄弟姐妹，並準備你的CSS針對不同的情況，如果你知道在你的列表項目的最大數量：

Can CSS detect the number of children an element has?

dl { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
dt,dd { 
 
    margin: 0; 
 
    flex-grow: 1; 
 
    } 
 

 
dt { 
 
    order: 0; 
 
    flex-basis: calc(100%/4); 
 
} 
 

 
dd { 
 
    order: 1; 
 
    flex-basis: calc(100%/4); 
 
}

<dl> 
 
    <dt>term1</dt><dd>defn1</dd> 
 
    <dt>term2</dt><dd>defn2</dd> 
 
    <dt>term3</dt><dd>defn3</dd> 
 
    <dt>term4</dt><dd>defn4</dd> 
 
</dl>

Answer 2

未來，您可能可以使用建議的css屬性break-after在每個dd之後開始一個新列。這不受任何瀏覽器支持呢，所以你必須做這樣的事情

dl div { 
 
    display: inline-block 
 
} 
 
div dd { 
 
    margin: 0 
 
}

<dl> 
 
    <div> 
 
    <dt>term1</dt> 
 
    <dd>defn1</dd> 
 
    </div> 
 
    <div> 
 
    <dt>term2</dt> 
 
    <dd>defn2</dd> 
 
    </div> 
 
    <div> 
 
    <dt>term3</dt> 
 
    <dd>defn3</dd> 
 
    </div> 
 
</dl>

使用選擇div和dd這裏也將工作，但我使用dl div和div dd以確保我們不會搞亂沒有列布局的任何dl。

注意：雖然這會使罰款（所有瀏覽器，我相信），它嚴格說來無效的HTML。如果你可以從使用dl了，我個人會使用Flex盒在不改變你的列表中，只是CSS像做

<div class="terms"> 
    <div class="term"> 
     <p>term1</p> 
     <dfn>def1</dfn> 
    </div> 
    <div class="term"> 
     <p>term2</p> 
     <dfn>def2</dfn> 
    </div> 
</div> 

Answer 3

我達到你想要的東西與彎曲，但只能通過增加控制整個寬度的包裝。

只改變你的html標記是div包裝。

div { 
 
    width: 50%; 
 
} 
 
dl { 
 

 
\t -ms-flex-direction: row; 
 
    -moz-flex-direction: row; 
 
    -webkit-flex-direction: row; 
 
    flex-direction: row; 
 
\t 
 
    -ms-flex-wrap: wrap; 
 
    -moz-flex-wrap: wrap; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
\t 
 
    display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    display: -moz-box;   /* OLD - Firefox 19- (buggy but mostly works) */ 
 
    display: -ms-flexbox;  /* TWEENER - IE 10 */ 
 
    display: -webkit-flex;  /* NEW - Chrome */ 
 
    display: flex;    /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
} 
 

 
dt { 
 
min-width: 30%; 
 

 
    -webkit-box-flex: 0 0 30%;  /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    -moz-box-flex: 0 0 30%;   /* OLD - Firefox 19- */ 
 
    -moz-flex: 0 0 30%; 
 
       /* For old syntax, otherwise collapses. */ 
 
    -webkit-flex: 0 0 30%;   /* Chrome */ 
 
    -ms-flex: 0 0 30%;    /* IE 10 */ 
 
    flex: 0 0 30%;     /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    
 
    -webkit-box-ordinal-group: 1; 
 
    -moz-box-ordinal-group: 1;  
 
    -ms-flex-order: 1;  
 
    -webkit-order: 1; 
 
    order: 1; 
 

 
} 
 

 
dd { 
 
min-width: 30%; 
 

 
    -webkit-box-flex: 0 0 30%;  /* OLD - iOS 6-, Safari 3.1-6 */ 
 
    -moz-box-flex: 0 0 30%;   /* OLD - Firefox 19- */ 
 
    -moz-flex: 0 0 30%; 
 
       /* For old syntax, otherwise collapses. */ 
 
    -webkit-flex: 0 0 30%;   /* Chrome */ 
 
    -ms-flex: 0 0 30%;    /* IE 10 */ 
 
    flex: 0 0 30%;     /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
 
    
 
    -webkit-box-ordinal-group: 2; 
 
    -moz-box-ordinal-group: 2;  
 
    -ms-flex-order: 2;  
 
    -webkit-order: 2; 
 
    order: 2; 
 
    
 
    margin-left: 0; 
 
}

<div> 
 
    <dl> 
 
    <dt>term1</dt> 
 
    <dd>defn1</dd> 
 
    <dt>term2</dt> 
 
    <dd>defn2</dd> 
 
    <dt>term3</dt> 
 
    <dd>defn3</dd> 
 
    </dl> 
 
</div>

Answer 4

有，不幸的是，並不在大多數瀏覽器工作，並能適當的和可擴展的解決方案。它需要適當的支持CSS3 break properties。

我仍然發佈這個答案;目前在FF工作。

dl { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 
dd + dt { 
 
    page-break-before: always; 
 
} 
 
dd { 
 
    margin: 0; 
 
}

<dl> 
 
    <dt>Term 1</dt> 
 
    <dd>Defn 1</dd> 
 
    <dt>Term 2</dt> 
 
    <dd>Defn 2</dd> 
 
    <dt>Term 3</dt> 
 
    <dd>Defn 3</dd> 
 
</dl> 
 

 
<dl> 
 
    <dt>Term 1</dt> 
 
    <dd>Defn 1</dd> 
 
    <dt>Term 2</dt> 
 
    <dd>Defn 2</dd> 
 
    <dt>Term 3</dt> 
 
    <dd>Defn 3</dd> 
 
    <dt>Term 4</dt> 
 
    <dd>Defn 4</dd> 
 
</dl> 
 

 
<dl> 
 
    <dt>Term 1</dt> 
 
    <dd>Defn 1-1</dd> 
 
    <dd>Defn 1-2</dd> 
 
    <dd>Defn 1-3</dd> 
 
    <dt>Term 2</dt> 
 
    <dd>Defn 2</dd> 
 
    <dt>Term 3-1</dt> 
 
    <dt>Term 3-2</dt> 
 
    <dt>Term 3-3</dt> 
 
    <dd>Defn 3</dd> 
 
    <dt>Term 4</dt> 
 
    <dd>Defn 4</dd> 
 
    <dt>Term 5</dt> 
 
    <dd>Defn 5</dd> 
 
</dl>

假設瀏覽器做正確的事，結果會是這樣的：