cuốn sách gpt4 ai đã làm

html - 试图 float 两个 div 但有问题

In lại Tác giả: Walker 123 更新时间:2023-11-28 03:32:26 30 4
mua khóa gpt4 Nike

我尝试在一行中对齐两个 div。使用 float left 属性,一切顺利。但是当我在 div 中使用图像时,它开始产生问题。

所以这是我的示例代码:-



Some heading




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. Aliquam in lorem vitae sem egestas tempor sit amet in ipsum. Duis sed turpis vestibulum, venenatis felis sed, pharetra nibh. Sed tempor, dui ac laoreet feugiat, purus velit auctor lorem, ac varius nisl mauris sit amet dui. Sed ut dapibus urna. Cras et sem eu arcu laoreet mollis.


Some heading




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut.


CSS

.parent {
width: 100%; }

.child-left {
nổi: trái;
width: 30%; }

.child-right {
chiều rộng: 70%;
float: left; }

正如您所见,它是重叠的,因为文本区域的高度与图像高度不同。 Min-height 属性不是我尝试过的好的解决方案。到目前为止,我正在使用表格,但这也不是最好的解决方案。那么我有哪些选择?

câu trả lời hay nhất

添加这个CSS类:

img{width:100%;}
.child-left:nth-child(odd){clear:left;}

这里是例子

.parent {
width: 100%; }

.child-left {
nổi: trái;
width: 30%; }

.child-right {
chiều rộng: 70%;
float: left; }
img{width:100%;}
.child-left:nth-child(odd){clear:left;}


Some heading




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut. Aliquam in lorem vitae sem egestas tempor sit amet in ipsum. Duis sed turpis vestibulum, venenatis felis sed, pharetra nibh. Sed tempor, dui ac laoreet feugiat, purus velit auctor lorem, ac varius nisl mauris sit amet dui. Sed ut dapibus urna. Cras et sem eu arcu laoreet mollis.


Some heading




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ante nisi, cursus mattis lectus vel, tempor viverra enim. Duis finibus ultricies elit, eget convallis ligula sollicitudin ut.

关于html - 试图 float 两个 div 但有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44660583/

30 4 0
Đề xuất bài viết: c++ - 唤醒 asio 截止时间计时器
Đề xuất bài viết: c++ - 过载解析的问题
Đề xuất bài viết: c++ - 隐藏/虚函数使用 C++
Đề xuất bài viết: c++ - 常量字段中的初始化列表不生成 operator=
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress