三div要素は、二人は一つは

Question

が構造を持って左にシフトされ、密接している：

<div id="div1"> 
    <div id="div2"></div> 
</div> 
<div id="div3"></div> 

どのように私はDIV3がDIV2に左浮遊させることができ、その後、DIV2に左シフトを作りますか？

Answer 1

これを試してみてください。

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

Answer 2

使用display:inline-blockすべての3のdivに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>

Answer 3

私の答えは、フレックスボックスの

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

Answer 4

使用フロートは左CSSと右

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

0を使用しています