使用float的三列布局

时间：2015-10-20 11:57:06

标签： css

我如何进行三列布局以防止背景图像崩溃并使所有内容与顶部对齐。我已经把它弄得差不多了，但我的广告一直在低于其他一切。可能是因为我将#content作为内联块吗？我需要左侧的推荐，中心的内容和右侧的广告。另外，背景图像仍然可见。 

<div id="wrapper">

<div id="inner-wrapper">
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
</div>

<div id="testimonials">
<h2>What My Clients Say</h2>
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
</div>
</div><!-- end #inner-wrapper -->

<div id="ads">
<h2>Ads</h2>
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
</div>

</div><!-- end #wrapper -->
</body>

CSS :(到目前为止）

#wrapper{background-image: url(images/columns-195-570-195.png);
width: 960px;
align-content: center;}

#testimonials{
    float: left;
    width: 195px;
}

#content{
  display: inline-block; 
    width:570px; 
}

#ads{
    float: right;
    width: 195px;}

谢谢！

4 个答案:

答案 0 :(得分：1)

好的，你可以找到这两种解决方案。一个浮动（你需要它）的解决方案和一个带有flexbox的解决方案。

仅使用浮动解决方案 

#wrapper{
    align-content:center;
    background-image: url(images/columns-195-570-195.png);
    width: 960px;
}
#testimonials{
    float:left;
    width:195px;
}
#inner-wrapper {
    float:left;
}
#content {
    display:inline-block; 
    width:570px; 
}
#ads {
    float:left;
    width:195px;
}
<div id="wrapper">
    <div id="inner-wrapper">
        <div id="content">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
        </div>
        <div id="testimonials">
            <h2>What My Clients Say</h2>
            <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
        </div>
    </div><!-- end #inner-wrapper -->
    <div id="ads">
        <h2>Ads</h2>
        <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
    </div>
</div><!-- end #wrapper -->

使用flexbox解决方案 

#wrapper{
    align-content:center;
    background-image:url(images/columns-195-570-195.png);
    display:flex;
    width:960px;
}
#testimonials{
    width:195px;
}
#content{
    width:570px; 
}
#ads {
    width:195px;
}
<div id="wrapper">
    <div id="testimonials">
        <h2>What My Clients Say</h2>
        <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
    </div>
    <div id="content">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
    </div>
    <div id="ads">
        <h2>Ads</h2>
        <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
    </div>
</div>

您不需要包装器或浮动来获得有效的三列布局。

答案 1 :(得分：0)

尝试在每列上使用float: left;，您可以在最新列上添加（如有必要）float: clear;。

关于图像的问题，您需要设置包装div的大小和位置。

此处还可以看到示例：https://jsfiddle.net/er4h0e95/6/ 

#wrapper {
    position:absolute;
    background-image: url(http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg);
    width: 960px;
    height:100%;
    align-content: center;
}
#testimonials {
    float: left;
    width: 195px;
}
#content {
    float: left;
    width:570px;
}
#ads {
    position:absolute;
    float: left;
    width: 195px;
    right:0;
}
<div id="wrapper">
    <div id="inner-wrapper">
        <div id="content">
            <div id="testimonials">
                
<h2>What My Clients Say</h2>

                <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
            </div>
            
<h1>Heading</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
        </div>
    </div>
    <!-- end #inner-wrapper -->
    <div id="ads">
        
<h2>Ads</h2>

        <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
    </div>
</div>
<!-- end #wrapper -->

答案 2 :(得分：0)

如果您在HTML中更改testimonials和content div的顺序，它将正常工作。的 Demo 

#testimonials {
    float: left;
    width: 195px;
}
#content {
    display: inline-block;
    width:570px;
}
#ads {
    float: right;
    width: 195px;
}

HTML：

 <div id="testimonials">.. </div>

<div id="content">..</div>

答案 3 :(得分：0)

内包装器正在创建一个div，用于显示推荐和内容作为将广告推送到新行的块。移动结束div以包含所有三个部分，或将内包装和广告显示为内联块，以便它们正确排列。

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="content">            
            <h1>Heading</h1> 
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p>
        </div>
        <div id="testimonials">
            <h2>What My Clients Say</h2>   
            <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p>
        </div>
        <div id="ads">              
            <h2>Ads</h2>   
            <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p>
        </div>
    </div>
    <!-- end #inner-wrapper -->
</div>
<!-- end #wrapper -->

以内容为中心添加：

#wrapper {
    background-image: url(images/columns-195-570-195.png);
    width: 960px;
    margin: 0 auto;
}
相关问题
最新问题