我正在尝试完成这样的事情:
特别是白色轮廓的垂直文本。
我能够做到这一点并使其动态化(因此每个单词“fale”“que”“nem”“um”“gringo”之间没有重叠),但它要求我创建一个包含 div对于每个 header ,像这样,
<div id="fale_textbox_0">
<div class="highlight0a" id="Fale">
<h1 class="fale_heading">Fale</h1>
</div>
<div class="highlight0a" id="que">
<h1 class="fale_heading">que</h1>
</div>
<div class="highlight0a" id="nem">
<h1 class="fale_heading">nem</h1>
</div>
<div class="highlight0a" id="um">
<h1 class="fale_heading">um</h1>
</div>
</div>
我知道是因为是 block 型元素。为什么,那我这样做是不是不行
<div id="fale_text_container">
<h1 class="fale_heading" id="fale">Fale</h1>
<h1 class="fale_heading" id="que">que</h1>
<h1 class="fale_heading" id="nem">nem</h1>
<h1 class="fale_heading" id="um">um</h1>
<div id="fale_textbox_2">
<h1 class id="fale_heading_2">Rápido</h1>
</div>
<div id="fale_textbox_3">
<h2 id="fale_subheading_2">Sem Sotaque</h2>
</div>
<div id="fale_textbox_1">
<h2 id="fale_subheading_1">GRINGO</h2>
</div>
然后将容器设置为display: block
与 min-width
和 max-width
已确立的。像这样:
#fale_container {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: black;
height: auto;
min-height: 300px;
position: relative; }
#fale_container_padding {
position: relative;
height: 20%; }
#fale_text_container {
position: relative; }
.fale_heading {
display: block;
position: absolute;
width: 13.32756%;
float: left;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3.5em;
clear: right; }
#fale, #que, #nem, #um {
z-index: 10; }
#fale {
margin-top: -18%; }
#fale:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
width: 87%;
height: 100%;
left: 8%; }
#que {
margin-top: -9.5%; }
#que:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 73%;
left: 8%; }
#nem {
margin-top: -1%; }
#nem:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 82%;
left: 8%; }
#um {
margin-top: 7%; }
#um:after {
content: '';
z-index: -1;
position: absolute;
background-color: #fff;
height: 100%;
width: 89%;
left: 8%; }
当我这样做时,会出现重叠。 JSfiddle
单独阻止是行不通的。 block
也没有和 min-width
和 min-height.
min-width
也没有和 min-height
没有block.
是不是因为容器设置为position:relative
在 <div>
里面高度设置为 auto?
为什么不 Block
也不min
属性是否正常?
最佳答案
这是一个编辑过的 fiddle :http://jsfiddle.net/0ya6zfLf/1/
HTML
您需要将所有 float 元素包装到一个容器中,并为其指定 position: absolute;
。 (而不是单独的标题)这样你的每个标题都可以相对定位并完美地保持它们的高度。
<div class="white-strips-container">
<h1 class="fale_heading" id="fale">Fale</h1>
<h1 class="fale_heading" id="que">que</h1>
<h1 class="fale_heading" id="nem">nem</h1>
<h1 class="fale_heading" id="um">um</h1>
</div>
CSS
对于新的包装类
.white-strips-container {
position: absolute;
width: 150px;
}
对于标题
.fale_heading {
display: inline-block;
line-height: 20px;
margin-right: 0.00666%;
margin-left: 13.33422%;
color: black;
font-size: 3.5em;
height: 50px;
clear: right;
background-color: #fff;
margin-top: 0;
margin-bottom: 10px;
}
关于html - 动态宽度上的标题元素溢出 - 显示 : block and min-height/width on contained container div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30769450/