Aligning Div with bullet list

我試圖讓我的子彈正確地對齊div圖像。Aligning Div with bullet list

這裏是我的小提琴鏈接：https://jsfiddle.net/tzhvdpj7/

從這個例子可以看到我的最後一組的要點是遠遠另兩個相鄰的下方。

HTML：

<body> 
<img src="http://luvit.xoom.it/wordpress/wp-content/uploads/2012/02/Kabokov-INGO-MAURER-210x564.jpg" alt="Lamp" class="right" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<br> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

<br> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 


<p>&nbsp;</p> 
<p>&nbsp;</p> 

<div style="float: left; width: 33%;"> 
<ul> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
</ul> 
</div> 
<div style="float: left; width: 33%;"> 
<ul> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
</ul> 
</div> 
<div style="float: right; width: 33%;"> 
<ul> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<li>Test</li> 
<br> 
</ul> 
</div>

CSS：

.right { 
    float: right; 
    padding: 0px 0px 20px 30px; 
} 

.p { 
    text-indent: 30pt; 
}

任何幫助任何人在這裏？一直卡在這..

來源

2017-04-26 buzzin

不要使用寬度：33％在過去的3格 – Nimish

什麼是你需要的輸出。你能分享一張圖片/截圖嗎？ –

你應該使div更小，我做了28％的寬度，但你可以改變這一點。

.right { 
 
    float: right; 
 
    padding: 0px 0px 20px 30px; 
 
} 
 

 
.p { 
 
    text-indent: 30pt; 
 
}

<body> 
 
    <img src="http://luvit.xoom.it/wordpress/wp-content/uploads/2012/02/Kabokov-INGO-MAURER-210x564.jpg" alt="Lamp" class="right" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    <br> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 
    <br> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 

 

 
    <p>&nbsp;</p> 
 
    <p>&nbsp;</p> 
 

 
    <div style="float: left; width: 28%;"> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
    </ul> 
 
    </div> 
 
    <div style="float: left; width: 28%;"> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
    </ul> 
 
    </div> 
 
    <div style="float: left; width: 28%;"> 
 
    <ul> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <li>Test</li> 
 
     <br> 
 
    </ul> 
 
    </div>

來源

2017-04-26 09:58:29

這工作！謝謝！ – buzzin

Aligning Div with bullet list

回答

相關問題