gpt4 book ai didi

html - 如何设置
s inline : text, img, text, text

转载 作者:行者123 更新时间:2023-11-28 12:35:00 27 4
gpt4 key购买 nike

起初我必须阅读很多教程,但我仍然不知道我做错了什么......

我想内联使用 4 个 div。在我想放置的那些 div 中:文本、图像、文本、文本。我希望中间文本自动设置为最大宽度。

我写了一个简单的代码,只是为了说明我的问题:

<div>
<div style="float: right; width: 100px; background-color: red">right</div>
<div style="margin-right: 100px; background-color: blue">
<div style="width: 100px; background-color: green">left</div>
<div style="width: 100px; margin-left: 100px; background-color: pink">
<img src="../zdjecia_przedmiotow/1_small.jpg" />

</div>
<div style="margin-left: 200px; background-color: green">center</div>
</div>
</div>

它看起来像这样: enter image description here

我想用 div 来做!我错过了什么?

最佳答案

首先,您需要将这些 div float 到内部,以便它们彼此相邻对齐。然后你可以使用 calc() 让最后一个容器占据剩余的宽度;

FLOAT EXAMPLE

您可以在父级上使用 display: table 并将子级设置为 display: table-cell ,如下所示:

TABLE EXAMPLE

我还对它进行了一些重组,因为其中有一些不必要的元素/样式:

HTML

<div class="wrapper">
<div class="box box1">left</div>
<div class="box box2">
<img src="../zdjecia_przedmiotow/1_small.jpg" />
</div>
<div class="box box3">center</div>
<div class="box box4">right</div>
</div>

CSS

.wrapper{
overflow:hidden;
width:100%;
}

.box{
float: left;
}

.box1{
width: 100px;
background-color: green;
}

.box2{
width: 100px;
background-color: pink;
}

.box3{
background-color: green;
width:calc(100% - 300px);
}

.box4{
width:100px;
background-color: blue;
}

CLEANER FIDDLE

关于html - 如何设置 <div> s inline : text, img, text, text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27893650/

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