Wie repariere ich ein div von gehen auf der rechten Seite meiner anderen divs

Question

So bin ich eine Website und ich habe drei divs Seite an Seite. Jetzt möchte ich Text unter diesen drei divs hinzufügen und sie gehen nur auf der rechten Seite von ihnen. Ich weiß nicht, ob es wegen Float oder etwas ist. Bitte hilf mir herauszufinden, warum das passiert.

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 Code:

.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

Remove position: absolute; auf .wed Klasse. Sehen Sie den Code unten: -

.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 2

Sie haben float: left und position: absolute auf der div.wed ich denke, die Position nicht notwendig ist absolut.

Wenn Sie float: left für Layout verwenden, müssen Sie Ihre Floats löschen.

verwendet I Nicholas Gallagher'a microclearfix: 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; 
    } 

Hier ist ein Stift: http://codepen.io/NeilWkz/pen/rLMpgZ

Answer 3

1. alle ändern position: absolute zu position: relative
2. fügen Sie eine .spacer CSS-Definition (set Höhe erwartetes Ergebnis)

hier ist ein fiddle

.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; 
 
}

<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>

Answer 4

Dies ist, was ich auf dem Bildschirm zu sehen.

Wenn ich Ihre Frage richtig gelesen das ist, was man wollte, nicht wahr?

Wenn Sie wollen, auf was warten Sie? und Jetzt bestellen! Ding unter die divs gehen, entfernen Sie beide Schwimmer nach links und Position: absolut.

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

Answer 5

Haben Sie danach gefragt? Du kannst keine Position haben: absolut und float: links, es macht keinen Sinn. funktioniert Float links nicht dann

[Here updated fiddle][1] 


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

Answer 6

diese position: absolute Einstellungen löschen und fügen Sie clear: both zu .order-now

https://jsfiddle.net/ovf8pdhm/1/