浮动两个div彼此相邻

我想在右边浮动两个div彼此相邻。最右边的div有可变的文本，所以我想让左边的div继续向左移动，但用可变数据粘在右边的div上。当我做浮动：右边的两个div取代右边的div。浮动两个div彼此相邻

<div class="wrap"> 
<div class ="left">static data<div> 
<div class ="right">variable data<div> 
<div class="wrap"> 

css 
.left{ 
    float:right; 
    width:69%; 
    display:block; 
    } 
.right{ 
    float:right; 
    width:28%; 
    display:block; 
} 
.wrap{ 
width:100%; 
}

右侧和左侧divs还有一些div，但没有任何类别。我该如何处理这个问题。显示时左边的div接管右边的div。

感谢，

来源

2013-10-01 ssD

您可能想要使用结束标签。 – nullability

如果你将两个元素浮在一边，那么源头中列出的那个将是那边最远的那个......所以这意味着你的'left' div将在你的'right' div的右边。 – Nightfirecat

我觉得你只是想交换的div。

的第一个孩子的div浮动一路的第二个右浮动的div被显示的第一个

FIDDLE

<div class="wrap"> 
    <div class ="right">variable data</div> 
    <div class ="left">static data</div> 
</div>

CSS左边的RHS

.left, .right{ 
    float:right; 
}

来源

2013-10-01 22:00:15 Danield

你可能想要触发一个叫做块格式上下文的东西。只需将合作伙伴的overflow属性设置为与默认值不同的值即可。如果您需要向后支持（即家庭），请使用zoom: 1;另外，请先放置浮动div。

.right { 
    width: 28%; 
    float: right; 
} 
.left { 
    overflow: auto; 
} 
.wrap{ 
    width:100%; 
} 

<div class="wrap"> 
    <div class ="right">variable data</div> 
    <div class ="left">static data</div> 
</div>

http://jsfiddle.net/GMwjQ/

已经有一个线程某处SO张贴了这个答案。找不到它。

来源

2013-10-01 22:09:23 Roger

我看不到'overflow：auto'在这个例子中做了什么？对于浮动来说，为了清除浮动的子元素，通常会将“overflow：auto”（或“hidden”）应用于父元素（即本例中的“.wrap”）。 – MrWhite

如果没有交换HTML中的div，请将包装器div浮动到右侧并使子div内嵌块。

css 
.wrap{ 
    float: right; 
} 
.left{ 
    width: 69%; 
    display: inline-block; 
    } 
.right{ 
    width: 28%; 
    display: inline-block; 
}

来源

2018-01-05 17:51:23

浮动两个div彼此相邻

回答

相关问题