我在将这两个 div 放在一起时遇到了一些困难。你能在 .html 文件中解决这些问题,所以没有 css 吗?
<div>
<div style="float: left">
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
<div style="float: left;">
<div class="wrapper" style="width: 50%;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
</div>
由于我必须添加更多文本:两个 div 必须是宽度的 50%。谢谢
您需要wrapper
在容器内而不是在其容器上添加浮动来修复您的实际代码。还要添加overflow:auto
到父容器以避免溢出问题:
<div style="overflow:auto;border:1px solid;">
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
<div class="wrapper" style="width: 50%;float: left;">
<div class="split clear light" style="background-image:url('images/slide01.jpg'); background-position: center;">
<article class="box center" style="float: right;">
<!-- ################################################################################################ -->
<div class="btmspace-30">
<p class="nospace"><a href="#">Tortor sit amet aliquet</a></p>
<h2 class="heading font-x2">Urna erat sit amet lacus</h2>
<p>Varius lectus id tempus venenatis massa tellus vehicula turpis eget.</p>
</div>
<footer><a class="btn medium inverse" href="#">Sit amet turpis</a></footer>
<!-- ################################################################################################ -->
</article>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句