这里是fiddle

Question

所以我正在编写一个网站，我有三个div并排。现在我想在这三个div之下添加文本，它们只是在它们的右侧。我不知道是不是因为漂浮还是什么的。请帮我弄清楚为什么会这样。

HTML：

        <div class="wed">
        <span style="color: #5a5a5a; font-size: 30px;">
            <h2>What Do We Provide</h2>
            <div class="spacer"></div>
        </span>
        <div class="img-three">
            <div class="img-left">
                <img src="../img/rocket.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>Lightning Speed</h3>
                <p>We make your custom software at <b>lightning</b> fast speeds. We <b>always meet your expectations.</b></p>
            </div>
            <div class="img-left">
                <img src="../img/key.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>DDos Protection</h3>
                <p><b>We block almost every ddos attact</b> to your software as possible. It is very hard to protect all of them.</p>
            </div>
            <div class="img-left">
                <img src="../img/disk.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>Hosting</h3>
                <p>We host your software if needed. This is not free, but we do give the option.</p>
            </div>
        </div>
    </div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="order-now">
        <h2>What are you waiting for?</h2>
        <div class="spacer"></div>     
        <a href="#order" class="btn btn-red">Order Now!</a>
    </div>

Css代码：

.wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
position: absolute;
float: left;
}
.img-three{
width: 100%;
margin: 0 auto;
}
.img-left{
margin-left: 10%;
float: left;
width: 20%;
margin-bottom: 10px;
}
.img-left p{
font-size: 15px;
color: #444;
}
.img-left h3{
font-size: 20px;
color: #444;
font-weight: bolder;
}
.order-now{
width: 100%;
margin: 0 auto;
position: absolute;
}

https://jsfiddle.net/1boc96cq/

Answer 1

你有浮动：左边和位置：绝对在div.wed我认为绝对位置是不必要的。

如果您使用float：left进行布局，则需要清除浮动。

我使用了尼古拉斯·加拉格尔（Nicholas Gallagher）的微小修正： http://nicolasgallagher.com/micro-clearfix-hack/

.cf:before,
.cf:after {
   content: " "; /* 1 */
   display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
 .cf {
   *zoom: 1;
  }

这是笔：http://codepen.io/NeilWkz/pen/rLMpgZ

Answer 2

删除位置：绝对;在.wed上课。请参阅以下代码： -

.wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
/*position: absolute;*/
float: left;
}
.img-three{
width: 100%;
margin: 0 auto;
}
.img-left{
margin-left: 10%;
float: left;
width: 20%;
margin-bottom: 10px;
}
.img-left p{
font-size: 15px;
color: #444;
}
.img-left h3{
font-size: 20px;
color: #444;
font-weight: bolder;
}
.order-now{
width: 100%;
margin: 0 auto;
position: absolute;
}

Answer 3

将所有position: absolute更改为position: relative
添加.spacer CSS定义（将高度设置为预期结果）

这里是fiddle

＆＃13;

.wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
position: relative;
float: left;
}
.img-three{
width: 100%;
margin: 0 auto;
}
.img-left{
margin-left: 10%;
float: left;
width: 20%;
margin-bottom: 10px;
}
.img-left p{
font-size: 15px;
color: #444;
}
.img-left h3{
font-size: 20px;
color: #444;
font-weight: bolder;
}
.order-now{
width: 100%;
margin: 0 auto;
position: relative;
}
.spacer{
  clear: both;
  height: 50px;
}

＆＃13;

<div class="wed">
        <span style="color: #5a5a5a; font-size: 30px;">
            <h2>What Do We Provide</h2>
            <div class="spacer"></div>
        </span>
        <div class="img-three">
            <div class="img-left">
                <img src="../img/rocket.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>Lightning Speed</h3>
                <p>We make your custom software at <b>lightning</b> fast speeds. We <b>always meet your expectations.</b></p>
            </div>
            <div class="img-left">
                <img src="../img/key.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>DDos Protection</h3>
                <p><b>We block almost every ddos attact</b> to your software as possible. It is very hard to protect all of them.</p>
            </div>
            <div class="img-left">
                <img src="../img/disk.png" style="border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px;">
                <h3>Hosting</h3>
                <p>We host your software if needed. This is not free, but we do give the option.</p>
            </div>
        </div>
    </div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="order-now">
        <h2>What are you waiting for?</h2>
        <div class="spacer"></div>     
        <a href="#order" class="btn btn-red">Order Now!</a>
    </div>

＆＃13;

Answer 4

这就是我在屏幕上看到的内容。

如果我正确地读了你的问题，这就是你想要的，对吗？

如果你想要你还在等什么？并立即订购！在div下面去的东西，移除左边的浮动和位置：绝对。

 .wed{
width: 100%;
height: 400px;
text-align: center;
margin: 0 auto;
/*position: absolute;*/
/*float: left;*/
}

Answer 5

这是你要求的吗？你不能有位置：绝对和浮动：左，它没有意义。浮动左边不起作用

[Here updated fiddle][1]


  [1]: https://jsfiddle.net/jovanpoplasen/1boc96cq/1/

Answer 6

删除这些position: absolute设置并将clear: both添加到.order-now

does not have reflection

如何修复div在我的其他div的右侧

6 个答案:

这里是fiddle