要有一個結構:三資料覈實,兩者緊密結合,一個左移
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
我怎樣才能讓DIV3浮動留給DIV2,然後就DIV2左移?
要有一個結構:三資料覈實,兩者緊密結合,一個左移
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
我怎樣才能讓DIV3浮動留給DIV2,然後就DIV2左移?
試試這個:
#div1 {
float: left;
width: 200px;
height: 30px;
border: 5px solid #ccc;
margin: 5px;
padding: 2px;
text-align: center;
}
#div2 {
float: right;
width: 80px;
text-align: center;
border: 5px solid #000;
}
#div3 {
float: left;
width: 200px;
height: 30px;
border: 5px solid red;
margin: 5px;
padding: 2px;
text-align: center;
}
<div id="div1">
div 1
<div id="div2">div 2</div>
</div>
<div id="div3">div 3</div>
這裏的jsfiddle:https://jsfiddle.net/nmsptskp/
使用display:inline-block
在所有3個DIV & float:right
上DIV2
#div1 {
border: 1px solid #f00;
height: 20px;
width: 100px;
display:inline-block;
}
#div2 {
float: right;
border: 1px solid #0f0;
height: 20px;
width: 50px;
display:inline-block;
}
#div3 {
border: 1px solid #00f;
height: 20px;
width: 50px;
display:inline-block;
}
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
我的答案是使用CSS Flexbox的左
.container{
display: flex;
}
#div1{
flex-grow: 1;
border:5px solid #ccc;
text-align:center;
display: flex;
justify-content: space-between;
flex-direction: col;
}
#div2{
width: 50%;
text-align:center;
border:5px solid #000;
self-
}
#div3{
flex-grow: 1;
border:5px solid red;
text-align:center;
}
<div class="container">
<div id="div1">
div 1
<div id="div2"> div 2</div>
</div>
<div id="div3"> div 3</div>
</div>
使用float和右
<style>
\t #div1{width:300px;height:50px;background:green;margin:10px;float:left;}
\t #div2{width:100px;height:50px;background:red;float:right;opacity:0.7}
\t #div3{width:100px;height:50px;background:yellow;margin:10px;float:left;}
</style>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>