我想在我的页面上创建一个视图:
哪里:
1)红色项是main container
并且具有width:100%
2)green
、blue
和white
元素位于一个容器中,该容器具有所需的宽度,并且位于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>
但结果是完全错误的。。。
怎么可能得到这种效果呢?
最佳答案
你太复杂了。您只需要使用不带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/