我想在我的页面上创建一个视图:
html - CSS根据需要在一行中的宽度-LMLPHP
哪里:
1)红色项是main container并且具有width:100%
2)greenbluewhite元素位于一个容器中,该容器具有所需的宽度,并且位于main container的中心
3)元素具有fixgreen
4)width:50px元素具有所需的宽度(取决于内部的文本长度,但文本必须相同,因此两个元素具有相同的宽度)
5)元素有fixblue
我试过这样的方法:

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

但结果是完全错误的。。。
html - CSS根据需要在一行中的宽度-LMLPHP
怎么可能得到这种效果呢?

最佳答案

你太复杂了。您只需要使用不带float的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>

如果geen和white块只是用于视觉效果,您可以很容易地将它们替换为一些背景和框阴影:
.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>

关于html - CSS根据需要在一行中的宽度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53453497/

10-12 00:47
查看更多