CSSフローティングブロックのサイズ変更が新しい行に変更される

ブロックサイズを変更すると、CSSだけで右サイド効果をどのように作成できますか？ブロックCとサイドバーは、私は、ブロックAのサイズを変更すると、私はブロックCがブロック https://jsfiddle.net/1va5xaz8/CSSフローティングブロックのサイズ変更が新しい行に変更される

.sidebar,.c{ 
 
\t float:left; 
 
} 
 
/* Block a will be resize*/ 
 
.a{ 
 
\t width:100px; 
 
\t height:100px; 
 
\t background:blue; 
 
\t margin:10px; 
 
} 
 

 
.b{ 
 
\t width:100px; 
 
\t height:300px; 
 
\t background:blue; 
 
\t margin:10px; 
 
} 
 

 
.c{ 
 
\t width:500px; 
 
\t height:100px; 
 
\t background:blue; 
 
\t margin:10px; 
 
}

<div class="sidebar"> 
 
\t <div class="a">a</div> 
 
    <div class="b">b</div> 
 
</div> 
 
<div class="c">c</div>

出典

2017-07-21 YWX

'A'要素を' 100％ ' –

あなたのコードを共有して、あなたの質問に答えることができます。 – Berkay

ブロックAのサイズ変更がどのように起こるかは不明です。 –

table { 
 
    width: 450px; 
 
    color: red; 
 
    font-family: sans-serif; 
 
} 
 

 
td { 
 
    border: 5px solid black; 
 
    padding: 100px 0; 
 
    text-align: center; 
 
    font-size: 32px; 
 
} 
 

 
tr:first-child td { 
 
    padding: 30px 0; 
 
} 
 

 
tr:nth-child(2) td:first-child { 
 
    width: 130px; 
 
} 
 

 
tr:last-child td { 
 
    border-color: transparent; 
 
    height: 40px; 
 
    padding: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<table cellspacing="15"> 
 
    <tbody> 
 
    <tr> 
 
     <td colspan="2">A</td> 
 
    </tr> 
 
    <tr> 
 
     <td>B</td> 
 
     <td rowspan="2">C</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body> 
 
</html>

怒鳴る移動することを願って、素子をフローティングされます

出典

2017-07-21 10:04:12

CSSフローティングブロックのサイズ変更が新しい行に変更される

答えて

関連する問題