Question

我有以下代码：fiddle

<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包含单词“True”，右边的div包含文本。除了标题为“Two”之外，其余的相同。

那里的任何人都可以看到我做错了什么。小提琴输出看起来非常糟糕，完全错误。

我想要的是什么：

One
True   dsafjfdsjdsafjdsafasdfasdfasfd
       asdfasdfasdfsdafdsfsdfdsafdsaf
       asfdadsffffffff


Two
False  dsafjfdsjdsafjdsafasdfasdfasfd
       asdfasdfasdfsdafdsfsdfdsafdsaf
       asfdadsffffffff

经过很长一段时间的研究，我唯一可以正常工作的是桌子。谢谢大家的帮助。

Answer 1

这是你要找的吗？：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>

Answer 2

试试这个：

您需要删除我放入的边框，以显示元素的位置。这里的关键是你需要清除浮子。您还需要在包含文本

的右侧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>

Answer 3

尝试在第二个div上添加style="clear: both;"，文本两个

<强>更新

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

试图组织我的DIV

3 个答案: