gpt4 book ai didi

html - CSS float block 调整大小更改为新行

转载 作者:行者123 更新时间:2023-11-28 03:20:40 25 4
gpt4 key购买 nike

如何在 block A 调整大小时仅使用 CSS 创建右侧的效果? Block C 和 sidebar 是 float 元素,当我调整 Block A 的大小时,我希望 Block C 移动到 Block A 下方 https://jsfiddle.net/1va5xaz8/

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

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

.c{
width:500px;
height:100px;
background:blue;
margin:10px;
}
<div class="sidebar">
<div class="a">a</div>
<div class="b">b</div>
</div>
<div class="c">c</div>

Example

最佳答案

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>

关于html - CSS float block 调整大小更改为新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45232290/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com