将有序列表编号与内容的第一行对齐

Question

I have an ordered list that can contain any number of elements. Each element can be different in size, but regardless of size I want the number of the ordered list to align with the first row of the content. So what I want to achieve is this:

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit...
2. Box 1

See my jsfiddle for the problem I have.

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

This is the HTML and CSS I have

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

Can you help me with this?

Answer 1

Does this work for you?

 .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

updated answer. it will work on IE also

use display:inline-table

demo: 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

use display: inline-flex; instead of display: table; for your class .boxes .

If you want to keep the space below the boxes you can add 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>