Я пытаюсь выровнять логотип и заголовок рядом, чтобы абзац шел ниже. Я пробовал плавать, но он не работает. Как мне легко это сделать? (Css noobs)

<div class="left-column" style="float:left; background-color:#FF0; margin-left:10px; margin-top:20px;" width = "515">
    <div class= "Payement" style=" background-color:#D5D5D5">
     <img src="images/Forma1copy.png" class="logo_page"/>
     <h2>Payement</h2>
     <p> We accept all major credit and debit cards including Mastercard,Visa, American Express, and Discover. 
 We accept Paypal as a method of payment. </p>
    </div>
    <div class= "shipement" style=" background-color:#D5D5D5">
     <img src="images/Forma1_0.png"  class="shipement_logo" />
     <h2>Shipement</h2>
     <p>Free continental shipping within 2-3 business days. 
Canadian shipping for $4.99. Shipped within 2-3 business days.</p>
    </div>
   <div class ="return_policy" style=" background-color:#D5D5D5">
     <img src="images/Forma1.png" class="return_policy" />
     <h2>Return Policy</h2>
     <p> If you are not completely satisfied with your bagels, return it. No questions asked. We will refund your full purchase price.</p>
  </div>
</div>

Это картина того, что у меня есть

это то, чего я пытаюсь достичь

-1
Mnia 6 Сен 2016 в 21:28

6 ответов

Лучший ответ
<div class= "Payement" style=" background-color:#D5D5D5">
     <div style="display:flex">
     <img src="images/Forma1copy.png" class="logo_page"/>
     <h2>Payement</h2>
     </div>
     <p> We accept all major credit and debit cards including Mastercard,Visa, American Express, and Discover. 
 We accept Paypal as a method of payment. </p>
    </div>

Просто оберните img и h2 внутри div и задайте стиль как display: flex

1
shubham khandelwal 6 Сен 2016 в 18:35
You can use something about following code.

<div style="">
<div style="float:left;width:80px;height:50px;">
<img src="images/Forma1copy.png" class="logo_page"/>
</div>
<div style="float:left;width:200px;text-align:left;">
     <h2>Payement</h2>
</div>
<div style="clear:both"></div>
</div>
0
Obaidul Kader 6 Сен 2016 в 18:34

Вы можете использовать flexbox для получения желаемого результата. Я думаю, что это самое простое решение, и оно выглядит лучше всего.

<div class="left-column" style="float:left; background-color:#FF0; margin-left:10px; margin-top:20px;" width = "515">
  <div class= "Payement" style=" background-color:#D5D5D5">
    <div class = "flex-wrapper">
      <img src="images/Forma1copy.png" class="logo"/>
      <h2>Payement</h2>
      <p> We accept all major credit and debit cards including Mastercard,Visa, American Express, and Discover. 
        We accept Paypal as a method of payment. </p>     
    </div>
  </div>
  <div class= "shipement" style=" background-color:#D5D5D5">
    <div class = "flex-wrapper">
      <img src="images/Forma1_0.png"  class="logo" />
      <h2>Shipement</h2>
      <p>Free continental shipping within 2-3 business days. 
        Canadian shipping for $4.99. Shipped within 2-3 business days.</p>
    </div>
  </div>
  <div class ="return_policy" style=" background-color:#D5D5D5">
    <div class = "flex-wrapper">
      <img src="images/Forma1.png" class="logo" />
      <h2>Return Policy</h2>
      <p> If you are not completely satisfied with your bagels, return it. No questions asked. We will refund your full purchase price.</p>
    </div>
  </div>
</div>

Вот CSS:

.flex-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo {

  flex-shrink: 0;
  width: 30px;
  height: 30px;
  background-color: black; /* remove this line */

}

h2 {

  margin-right: 50px;
  margin-left: 25px;
  width: 100px;
  flex-shrink: 0;

}

This is what the result looks like

0
kag359six 6 Сен 2016 в 18:48

Разместите ваши изображения слева:

img {
  float: left;
}
img {
  float: left;
}
<div class="left-column" style="background-color:#FF0; margin-left:10px; margin-top:20px;" width="515">
  <div class="Payement" style=" background-color:#D5D5D5">
    <img src="images/Forma1copy.png" class="logo_page" />
    <h2>Payement</h2>
    <p>We accept all major credit and debit cards including Mastercard,Visa, American Express, and Discover. We accept Paypal as a method of payment.</p>
  </div>
  <div class="shipement" style=" background-color:#D5D5D5">
    <img src="images/Forma1_0.png" class="shipement_logo" />
    <h2>Shipement</h2>
    <p>Free continental shipping within 2-3 business days. Canadian shipping for $4.99. Shipped within 2-3 business days.</p>
  </div>
  <div class="return_policy" style=" background-color:#D5D5D5">
    <img src="images/Forma1.png" class="return_policy" />
    <h2>Return Policy</h2>
    <p>If you are not completely satisfied with your bagels, return it. No questions asked. We will refund your full purchase price.</p>
  </div>
</div>
-1
j08691 6 Сен 2016 в 18:33

Все, что вам нужно, это что-то вроде этого:

img, h2 {
    display: inline-block;
}

Очевидно, вы можете быть более подробными, например class h2 , etc ИЛИ вы можете сделать это встроенным, как вы делаете это сейчас ... хотя и избыточно (как хотите) ... но это должно сработать.

Вы также можете сделать flex в родительском div, если хотите перейти на более современный css3

-1
Riskbreaker 6 Сен 2016 в 18:43

Вы должны использовать: text-align: left; вместо float:left;

-1
Dennis Novac 6 Сен 2016 в 18:32