gpt4 book ai didi

css - 垂直扩展 div 以适应父容器

转载 作者:搜寻专家 更新时间:2023-10-31 22:49:48 24 4
gpt4 key购买 nike

我正在尝试使用 CSS 创建以下布局:

Desired Layout

  • 灰色矩形 = 容器
  • 蓝色矩形 = 图片
  • 白色矩形 = 内容

不幸的是,我能做到的最好的是:

Achieved Layout

内容 div 有两个问题:

  1. 如何在不对宽度进行硬编码的情况下使内容 div 位于图像的右侧。
  2. 如何使内容 div 垂直扩展以填充容器。

如果有人问过类似的问题,我们深表歉意。我在这里读过类似的问题,但它们似乎都与其他布局问题有关。

HTML:

<html>
<head>
<title>Test</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="solid">
<img id="snapshot" src="page.jpg">
<div class="content" style="margin-left: 165px;">
Test
</div>
<br style="clear:both"/>
</div>
</body>
</html>

CSS:

#snapshot {
float: left;
}

div.solid {
padding: 5px;
border: 1px solid black;
background-color: #E8E8FF;
}

div.content {
border: 1px solid black;
background-color: #FFFFFF;
}

最佳答案

如果你知道图像的宽度,你可以这样做:http://jsfiddle.net/EeLjd/

在内容上使用position: absolute,并将left设置为图像的宽度,加上填充。在图像上使用 float: left

关于css - 垂直扩展 div 以适应父容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8330797/

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