試圖整理我的DIV

我有以下代碼：fiddle 試圖整理我的DIV

<p><strong>One:</strong></p> 
<div class="clearfix"> 
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div> 
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div> 


</div>  <p><strong>Two:</strong></p> 
<div class="clearfix"> 
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div> 
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div> 
</div>

我想實現是一個標題「一」再下面一行用含字左邊一個DIV「真「並在右側包含文本的div。除了標題爲「Two」之外，跟着相同的東西。

任何人都可以看到我做錯了什麼。小提琴輸出看起來非常糟糕，完全錯誤。

我想要什麼：

One 
True dsafjfdsjdsafjdsafasdfasdfasfd 
     asdfasdfasdfsdafdsfsdfdsafdsaf 
     asfdadsffffffff 


Two 
False dsafjfdsjdsafjdsafasdfasdfasfd 
     asdfasdfasdfsdafdsfsdfdsafdsaf 
     asfdadsffffffff

後花了尋找到這一點，我可以得到正常工作是表的唯一的事情很長一段時間。謝謝大家的幫助。

來源

2011-06-21 David H

這是你在找什麼？：http://jsfiddle.net/jomanlk/eAFD6/

.wrap { 
    overflow:auto; 
    margin-bottom: 10px; 

} 

h2 { 
    display:block; 
    background:#AA0000; 
} 

.state { 
    float: left; 
    width: 10%; 
    background:#00AA00; 
} 

.text { 
    float:right; 
    width:80%; 
    background:#0000AA; 
} 

<div class='wrap'> 
    <h2>One</h2> 
    <div class='state'>True</div> 
    <div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat porttitor commodo. Suspendisse nec diam eros. Donec porta lacus sit amet urna cursus sit amet malesuada mi condimentum. Praesent nec nisi tortor. Nunc accumsan, nulla posuere hendrerit suscipit, arcu enim interdum urna, sit amet suscipit leo ligula vitae eros.</div> 
</div> 

<div class='wrap'> 
    <h2>Two</h2> 
    <div class='state'>True</div> 
    <div class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam placerat porttitor commodo. Suspendisse nec diam eros. Donec porta lacus sit amet urna cursus sit amet malesuada mi condimentum. Praesent nec nisi tortor. Nunc accumsan, nulla posuere hendrerit suscipit, arcu enim interdum urna, sit amet suscipit leo ligula vitae eros.</div> 
</div>

來源

2011-06-21 06:18:57 JohnP

我也改變了標記。 – JohnP

感謝您的建議。我試過這個。唯一的問題是你爲左手區域指定了10％的寬度。我真正需要的是將此設置爲50px，並根據屏幕寬度讓右側的區域水平展開或收縮。 –

@DavidH嗯，離開我的頭頂，只有桌子浮現在腦海。讓我試驗並看看 – JohnP

試試這個：

你要刪除我把剛纔的邊界，以顯示其中的元素。關鍵在於你需要清理你的浮標。另外你需要的寬度添加到右側的div包含文本

<p><strong>One:</strong></p> 

<div class="clearfix"> 
    <div class="clearfix" style="border: solid; width: 50px; float: left;">True</div> 
    <div class="clearfix" style="border: solid; float:left; width: 300px;"> 
     <strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. 
    </div> 
    <div style="clear: both"></div>

來源

2011-06-21 06:22:11 serialworm

感謝您的建議。我試過這個，但它與另一個解決方案有相同的問題，因爲您爲右手區域指定了300px的寬度。我真正需要的是將左邊的寬度設置爲50px，右邊的區域根據屏幕寬度進行水平擴展或縮小。 –

其實如果你看看JohnP上面的答案，你可以達到你要找的效果。我改變了他在他的小提琴示例中指定的css，以便將剩餘的div浮動起來，併爲右側div使用90％的寬度，並且它看起來很好地展開和收縮。 **。text { float：left; 寬度：90％; } ** – serialworm

嘗試在具有文本的第二個div添加style="clear: both;"兩個

UPDATE：

<div class="clearfix"> 
    <p><strong>One:</strong></p> 
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div> 
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div> 
</div>  
<div class="clearfix" style="clear: both;"> 
    <p><strong>Two:</strong></p> 
    <div class="clearfix" style="width: 50px; float: left; display: inline-block;">True</div> 
    <div class="clearfix" style="float:left; display: inline-block;"><strong>A</strong>: Throughout Windows Azure Connect CTP, many customers have asked for Windows Azure Connect relay presence in geographic locations outside US. Today we are very happy to announce that we have added new relays in Europe and Asia, with the launch of Windows Azure Connect CTP refresh, you can now choose a relay region that is close to your own geographic location to optimize network performance. </div> 
</div>

來源

2011-06-21 06:35:00

沒有第二個div與第二個文本兩個。這只是一段。出於某種原因，似乎我無法清除第一個DIV –

添加了上面的代碼來解決問題... –

試圖整理我的DIV

回答

相關問題