html - CSS作为一行中的neexed宽度

Question

我想在我的页面上创建一个视图：

在哪里：

1) 红色项目是main container并且有width:100%

2) green,blue和white元素位于一个容器中，该容器具有所需的宽度并且位于main container

3）green元素有修复width:50px

4）blue元素具有所需的宽度（取决于内部的文本长度，但文本必须相同，因此两个元素具有相同的宽度）

5）white元素有修复width:100px

我试过类似的东西：

<div style="height:100px;width:100%;background:red">
    <div style="height:100px;display:inline-block;margin:auto">
        <div style="height:100px;width:50px;background:green;float:left"></div>
        <div style="height:100px;display:inline-block;background:blue;float:left">MyText</div>
        <div style="height:100px;width:100px;background:white"></div>
        <div style="height:100px;display:inline-block;background:blue;float:left">MyText</div>
        <div style="height:100px;width:50px;background:green;float:left"></div>
    </div>
</div>

但结果是完全错误的......

怎么可能达到这个效果？

标签： htmlcss

Answer 1

你把这个复杂化了。您只需要使用inline-block没有浮动的元素：

.main {
  background:red;
  font-size:0;
  text-align:center;
  height:100px;
}
.main > div {
  display:inline-block;
  font-size:initial;
  height:100%;
  vertical-align:top;
}

.blue {
  background:blue;
}
.green {
  width:60px;
  background:green;
}
.white {
  width:100px;
  background:white;
}

<div class="main">
  <div class="green"></div>
  <div class="blue">text inside</div>
  <div class="white"></div>
  <div class="blue">text inside</div>
  <div class="green"></div>
</div>

如果绿色和白色块仅用于视觉效果，您可以轻松地将它们替换为一些背景和框阴影：

.main {
  background:red;
  text-align:center;
  height:100px;
  overflow:hidden;
}
.main > div {
  background:#fff;
  font-size:0;
}
.main div {
  display:inline-block;
  height:100%;
  vertical-align:top;
}

.blue {
  background:blue;
  font-size:initial;
}
.main  .blue:first-child {
  margin-right:50px;
  box-shadow:-25px 0 0 25px green;
}
.main  .blue:last-child {
  margin-left:50px;
  box-shadow:25px 0 0 25px green;
}

<div class="main">
  <div>
  <div class="blue">text</div>
  <div class="blue">text inside</div>
  </div>
</div>

如果你想让白色部分成为死点，你可以试试这个：

.main {
  height:100px;
  font-size:0;
}
.main > div {
  display:inline-block;
  background:red;
  width:calc(50% - 50px);
  height:100%;
  font-size:initial;
  overflow:hidden;
}
.main > div .blue {
  display:inline-block;
  height:100%;
  vertical-align:top;
  background:blue;
  box-shadow:0 0 0 50px green;
}

.main  > div:first-child {
  text-align:right;
  margin-right:50px;
}
.main  > div:last-child {
  text-align:left;
  margin-left:50px;
}

<div class="main">
  <div>
    <div class="blue">text</div>
  </div>
  <div>
    <div class="blue">text very long inside</div>
  </div>
</div>