Разметка с дивами (подскажите)

[viliksar]

Ребят, хочу замутить у себя на сайте похожее (скрин)

так как у меня ворд пресс стили ставлю в style.css, ну а дивы в редактор страницы контакты:

 

<div class="phone">
                    	<div class="title_zvonok">Позвоните нам</div>
                        <div class="title_phone">
                            <span class="phone-number-1">xxx xxx xxx</span><br>
                            xxx xxx xxx
                        </div>
  <div class="title_email">
                        <div class="title_email2">Напишите нам</div>
                        <div class="title_text">
                            xxx@gmail.com
                        </div>
                    </div>
  
</div>

так вот, не получается "Позвонить нам" и "написать нам" сделать как на скрине, т.е. чтобы они были в две колоночки. Сейчас когда я вставляю дивы, они просто идут друг за другом текстом. Ткните пальцем, что не так делаю.

Edited February 23, 2018 by viliksar

[DivMan]

стилей то нету 

[viliksar]

DivMan

Подскажите, правильно ли я делаю?

<div class="row">

                    <div class="phone1">
                    	<div class="cont1">Позвоните нам</div>
                        <div class="ringo_phone">
                            <span class="number-1">xxx xxx xxx</span><br>
                            xxx xxx xxx
                        </div>
                    </div>
                    
                    <div class="phone2">
                    	<div class="cont2">Позвоните нам</div>
                        <div class="ringo_phone">
                            <span class="number-1">xxx xxx xxx</span><br>
                            xxx xxx xxx
                        </div>
                    </div>
                </div>

.phone2 {
    position: relative;
    left: 500px;
    top: -55px ;
   }

по аналогии, используя относительное позиционирование, планирую расположить остальные блоки

Edited February 24, 2018 by viliksar

[DivMan]

никогда не делайте каркас, с помощью позиционирования!

https://htmlacademy.ru/courses/65

[viliksar]

53 минуты назад, DivMan сказал:

никогда не делайте каркас, с помощью позиционирования!

https://htmlacademy.ru/courses/65

Спасибо за ссылку, до этих курсов я пока не дошел, но на досуге обязательно пройду.

Ну, а если в двух словах, с помощью какого свойства я могу задать позицию блока phone2?

[DivMan]

float 

[viliksar]

17 часов назад, DivMan сказал:

float 

Посмотрите пожалуйста, что не так делаю, остальной каркас не обтекается:

<div class="row">

                    <div class="conta_w phone_cont">
                    	<div class="sm_title cont1">Позвоните нам</div>
                        <div class="cont_text ringo_phone">
                            <span class="binct-phone-number-1">xxxxxxxxxx</span><br>
                            xxxxxxxxxxxxxxx
                        </div>
                    </div>

                    <div class="conta_w email_cont">
                        <div class="sm_title cont2">Напишите нам</div>
                        <div class="cont_text">
                            xxxx@xxxxx.ru
                        </div>
                    </div>

                    <div class="clearfix"></div>

                    <div class="conta_w clock_cont">
                        <div class="sm_title cont3">Время работы</div>
                        <div class="cont_text">
                            с 8:00 до 18:00, без выходных
                        </div>
                    </div>

                    <div class="conta_w adress_cont">
                        <div class="sm_title cont4">Адрес</div>
                        <div class="cont_text">
                            г.Москва xxxxxxxxxx
                        </div>
                    </div>

                </div>

.phone_cont {
	float: left;
  padding: 0px;
  margin-right: 20px;
  width: 40%;
}

.clock_cont {
float: left;
padding: 0px;
margin-right: 150px;
width: 40%;
}

 

Edited February 25, 2018 by viliksar

[DivMan]

<div class="row">
      <div class="top clearfix">
        <div class="left-block">
          <div class="sm_title cont1">Позвоните нам</div>
              <span class="binct-phone-number-1">xxxxxxxxxx</span>
        </div>
        <div class="right-block">
          <div class="sm_title cont1">Напишите нам</div>
              <span class="binct-phone-number-1">xxxxxxxxxx</span>
        </div>
      </div>
      
      <div class="bottom clearfix">
        <div class="left-block">
          <div class="sm_title cont1">Время работы</div>
              <span class="binct-phone-number-1">xxxxxxxxxx</span>
        </div>
        <div class="right-block">
          <div class="sm_title cont1">Адрес</div>
              <span class="binct-phone-number-1">xxxxxxxxxx</span>
        </div>
      </div>



      </div>

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.top, .bottom {
  border: 1px solid;
  padding: 20px;
  width: 600px;
  margin-bottom: 20px;
}

.left-block {
  float: left;
}
.right-block {
  float: right;
}

 

[viliksar]

DivMan

А если так на флексбоксе - https://jsfiddle.net/6bte15w9/8/

Что скажите?

 

Позиционирование, больше не использую в своей практике...

Edited March 1, 2018 by viliksar

[DivMan]

я флексбоксы и гриды, пока не использую 

[Zhukov_Anton]

width: 50%; 
box-sizing: border-box;
display: inline-block;

обоим блокам, а так же родителю добавь на всякий случай: box-sizing:border-box;   . Потому что я не знаю, есть ли у тебя в родителе отступы , поэтому лучше уберечь себя)

Edited March 1, 2018 by Zhukov_Anton