順序付きリスト番号をコンテンツの最初の行に揃えます。

Question

私は任意の数の要素を含むことができる順序付きリストを持っています。各要素はサイズが異なることができますが、サイズに関係なく、順序付きリストの数をコンテンツの最初の行に合わせることが必要です。それでは、私が達成したいことはこれです：

1. Loremのイプサムの嘆き
2. ... consectetur adipiscing ELIT、AMET座るボックス1

私が持っている問題についての私のjsfiddleを参照してください。

https://jsfiddle.net/txo5bsua/2/

これは、HTMLとCSSはあなたが私はこれで助けることができる私は

.boxes { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.box { 
 
    display: table-cell; 
 
} 
 

 
.box1 { 
 
    background: orange; 
 
    width: 75%; 
 
} 
 

 
.box2 { 
 
    background: yellow; 
 
}

<ol> 
 
    <li> 
 
    <div class="boxes"> 
 
     <div class="box box1"> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum, 
 
     vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida. 
 
     </div> 
 
     <div class="box box2"> 
 
     <input type="radio">Yes 
 
     <input type="radio">No 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="boxes"> 
 
     <div class="box box1">Box 1</div> 
 
     <div class="box box2">Box 2</div> 
 
    </div> 
 
    </li> 
 
</ol>

を持っているのですか？

Answer 1

があなたのためにこの仕事をしていますか？あなたのクラス.boxesため

.boxes { 
 
    display:table; 
 
    width: 100%; 
 
    height: 100%; 
 
    float: right; 
 
} 
 
li { 
 
    clear: both; 
 
} 
 

 
.box { 
 
    display: table-cell; 
 
} 
 

 
.box1 { 
 
    background: orange; 
 
    width:75%; 
 
    } 
 

 
    .box2 { 
 
     background: yellow; 
 
    }

<ol> 
 
    <li> 
 
     <div class="boxes"> 
 
      <div class="box box1"> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum, vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida. 
 
      </div> 
 
      <div class="box box2"> 
 
       <input type="radio">Yes 
 
       <input type="radio">No 
 
      </div> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <div class="boxes"> 
 
      <div class="box box1">Box 1</div> 
 
      <div class="box box2">Box 2</div> 
 
     </div> 
 
    </li> 
 
</ol>

Answer 2

更新された回答。それはまた、IE上で

使用ディスプレイを動作します：インラインテーブル

デモ：jsfiddle

.boxes { 
 
    display:inline-table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.box { 
 
    display: table-cell; 
 
} 
 

 
.box1 { 
 
    background: orange; 
 
    width:75%; 
 
} 
 

 
.box2 { 
 
    background: yellow; 
 
    width:25%; 
 
}

<ol> 
 
<li> 
 
<div class="boxes"> 
 
    <div class="box box1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum, vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida. 
 
</div> 
 
    <div class="box box2"> 
 
    <input type="radio">Yes 
 
    <input type="radio">No 
 
    </div> 
 
</div> 
 
</li> 
 
<li> 
 
<div class="boxes"> 
 
    <div class="box box1">Box 1</div> 
 
    <div class="box box2">Box 2</div> 
 
</div> 
 
</li> 
 
</ol>

Answer 3

使用display: inline-flex;の代わりdisplay: table;。

あなたはボックスの下の空間を維持したい場合は、margin-bottom: 20px;を追加することができます。

.boxes { 
 
    display:inline-flex; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin-bottom: 20px; 
 
} 
 

 
.box { 
 
    display: table-cell; 
 
} 
 

 
.box1 { 
 
    background: orange; 
 
    width:75%; 
 
} 
 

 
.box2 { 
 
    background: yellow; 
 
    width: 25%; 
 
} 
 

 
li { 
 
    clear: both; 
 
}

<ol> 
 
<li> 
 
<div class="boxes"> 
 
    <div class="box box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis condimentum massa. Quisque purus nisl, finibus id placerat id, ultricies non magna. Sed justo dui, tristique et metus at, fringilla viverra ipsum. Duis malesuada est eget lectus fermentum, vitae pretium eros tempor. Integer eu mi metus. Cras dui ipsum, iaculis ut libero dictum, dapibus consequat orci. Sed semper vitae lorem eu sollicitudin. Curabitur dapibus fringilla facilisis. Nullam facilisis ante in velit maximus gravida. 
 
</div> 
 
    <div class="box box2"> 
 
    <input type="radio">Yes 
 
    <input type="radio">No 
 
    </div> 
 
</div> 
 
</li> 
 
<li> 
 
<div class="boxes"> 
 
    <div class="box box1">Box 1</div> 
 
    <div class="box box2">Box 2</div> 
 
</div> 
 
</li> 
 
</ol>