如何设置<div>的内联:文本、img、文本、文本

Question

一开始我读了很多教程，但我不知道我做错了什么.

我想使用4div内联。在这些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>

看起来是这样的：

​

我想用div来做！我遗漏了什么？

Answer 1

首先，你需要让这些div在里面浮动，这样它们就会对齐在一起。然后可以使用calc()使最后一个容器占用其余的宽度；

浮子实例

或

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

表例

此外，我还对其进行了一些调整，因为其中包含了一些不必要的元素/样式：

<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;
}

清洁小提琴

Answer 2

我稍微简化了HTML结构，并使用了浮点数。将CSS放在行内：

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

CSS发布后：

.box{background-color:blue}
.left{width: 100px; background-color: green; float:left;}
.fill{background-color: pink; width:calc(100% - 300px);}
.right{width: 100px; background-color: red; float:right;}

<div class="box">
    <div class="left">left</div>
    <img class="left" src="../zdjecia_przedmiotow/1_small.jpg"/>
    <div class="left fill">center</div>
    <div style="right">right</div>
</div>

小提琴