1

У меня съезжает текст с картинками. Не могу организовать нормально 4 объекта в один ряд. как мне улучшить мой HTML код?

Когда текста больше, чем картинки, картинки начинают съезжать. Как добиться того, чтобы картинки выравнивались по вертикали, а текст оставался на одном уровне между собою.

ОБНОВЛЕНО:

Нужно добиться того, что как-бы все 4 секции (Картинка-текст-текст-картинка) были одной высоты, НО текст выравнивался бы по вертикали ближе к верху (это я уже сделал), а картинки (т.к. они не такой же высоты как текст) должны по вертикале выравниваться по центру.

Вот мой код:

.services{
    width: 100%;
    text-align: center;
    font-family:'Exo', sans-serif;
    overflow: hidden;
}

.services > div {
    display: table;
    background-color: #f8f8f8;
    padding: 2%;
    float: left;
    width: 46%;
}

.services > div > div {
    width: 50%;
    display: table-cell;
    vertical-align: top;
}

.services > div > img {
    margin: 0 auto;
    width: 90%;
    display: table-cell;
    height: auto;
    border-radius: 5px;
}

.services h1 {
    margin-top: -1%;
    font-weight:500;
    font-size:3vw;
}

.services p{
    width: 70%;
    margin: 0 auto 2% auto;
    font-weight:100;
    font-size:1.2vw;

}

.white_btn{
    border: 3px solid white;
    color: #b52519;
}

.white_btn a {
    color: white;
}

.white_btn:hover{
    background-color: white;
}

.white_btn:hover a{
    color:#b52519;
}

.red_btn{
    border: 3px solid #b52519;
    color: white;
}

.red_btn a{
    color: #b52519;
}

.red_btn:hover {
    background-color: #b52519;
}

.red_btn:hover a{
    color: white;
}

.order {
    margin-top: 2%;
    font-size: 1.5vw;
    border-radius: 10px;
    background-color: transparent;
    text-align: center;
    padding: 1%;
    cursor: pointer;
}

.order span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.order span:after{
    content:'\00bb';
    position:absolute;
    opacity:0;
    top:0;
}

.order:hover span{
    padding-right:25px;
}

.order:hover span:after{
    opacity:1;
    right:0;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:100|Exo:100,200,300,500,700|Raleway:100,200,300,500" rel="stylesheet">
<div class="services">
  <div id="for_clients">
    <img src="https://i.stack.imgur.com/VCwnv.jpg">
    <div id="for_clients_block">
      <h1>FOR CLIENTS</h1>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu. bsdfjfajadjpsifjci dh oas voshv .
      </p>
      <button class="order red_btn services_button"><span><a href="for_clients.php">Learn more</a></span></button>
    </div>
  </div>
  <div id="for_partners">
    <div id="for_parents_block">
      <h1>FOR PARTNERS</h1>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu.
      </p>
      <button class="order red_btn services_button"><span><a href="for_partners.php">Learn more</a></span></button>
    </div>
    <img src="https://i.stack.imgur.com/SwSBO.jpg">
  </div>
</div>

8
  • В вашем примере картинки ссылаются на ВК, а их там уже нет.
    – DaemonHK
    13 дек 2017 в 7:54
  • @DaemonHK хм... я их вижу. но ладно, сейчас исправлю. Я примерно нашел ответ на свой же вопрос, но все же хочется улучшить код 13 дек 2017 в 7:55
  • @DaemonHK хм... я их вижу. но ладно, сейчас исправлю. Я примерно нашел ответ на свой же вопрос, но все же хочется улучшить код 13 дек 2017 в 7:55
  • Скорее всего вы их видите, потому что они находятся в вашем закрытом альбоме, как вариант
    – DaemonHK
    13 дек 2017 в 7:57
  • @DaemonHK все, я изменил код) Теперь должно отображаться 13 дек 2017 в 8:18

2 ответа 2

1

.services{
    width: 100%;
    text-align: center;
    font-family:'Exo', sans-serif;
    overflow: hidden;
    display: table;
}

.services > div {
    display: table-cell;
    background-color: #f8f8f8;
    padding: 2%;
    width: 46%;
    height: 100%;
    vertical-align: middle;
}

.services > div > div {
    width: 50%;
    height: 100%;
    display: table-cell;
    vertical-align: top;
}

.services > div > .table-center {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}

.services > div > .table-center img{
    width: 90%;
    border-radius: 5px;
}

.services h1 {
    margin-top: -1%;
    font-weight:500;
    font-size:3vw;
}

.services p{
    width: 70%;
    margin: 0 auto 2% auto;
    font-weight:100;
    font-size:1.2vw;

}

.white_btn{
    border: 3px solid white;
    color: #b52519;
}

.white_btn a {
    color: white;
}

.white_btn:hover{
    background-color: white;
}

.white_btn:hover a{
    color:#b52519;
}

.red_btn{
    border: 3px solid #b52519;
    color: white;
}

.red_btn a{
    color: #b52519;
}

.red_btn:hover {
    background-color: #b52519;
}

.red_btn:hover a{
    color: white;
}

.order {
    margin-top: 2%;
    font-size: 1.5vw;
    border-radius: 10px;
    background-color: transparent;
    text-align: center;
    padding: 1%;
    cursor: pointer;
}

.order span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.order span:after{
    content:'\00bb';
    position:absolute;
    opacity:0;
    top:0;
}

.order:hover span{
    padding-right:25px;
}

.order:hover span:after{
    opacity:1;
    right:0;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:100|Exo:100,200,300,500,700|Raleway:100,200,300,500" rel="stylesheet">
<div class="services">
  <div id="for_clients">
    <span class="table-center">
      <img src="https://i.stack.imgur.com/VCwnv.jpg">
    </span>
    <div id="for_clients_block">
      <h1>FOR CLIENTS</h1>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu. bsdfjfajadjpsifjci dh oas voshv .
      </p>
      <button class="order red_btn services_button"><span><a href="for_clients.php">Learn more</a></span></button>
    </div>
  </div>
  <div id="for_partners">
    <div id="for_parents_block">
      <h1>FOR PARTNERS</h1>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu.
      </p>
      <button class="order red_btn services_button"><span><a href="for_partners.php">Learn more</a></span></button>
    </div>
    <span class="table-center">
      <img src="https://i.stack.imgur.com/SwSBO.jpg">
    </span>
  </div>
</div>

  1. Рекомендую отказаться от id - фронтендщики будут говорить вам, что они нужны только для js, не верьте им, просто ими нужно уметь пользоваться, а в данном случае они просто не нужны

  2. Переписать код на классы, тогда отпадет необходимость городить селекторы вида .service > div > div

  3. Сейчас картинки центрируются относительно своих родителей, а не всей таблицы, поэтому правильным решением было бы разделить эту таблицу на 4 блока, а не на 2, а потом еще раз на 2

  4. Посмотрите также в сторону flexbox

4
  • Маленький недочет... У тебя текст съезжает... h1 блоки должны быть на одном уровне как и начало <p>-блока 13 дек 2017 в 8:53
  • Почему так произошло описано в 3 пункте))
    – DaemonHK
    13 дек 2017 в 8:53
  • Тогда решением этой проблемы будет написания стиля отдельно для картинок и текста ИЛИ только для текста, сказав, что "видишь блоки выравниваются по центру относительно вертикали? ты будешь выравниваться ближе к top". Btw, Спасибо тебе за помощь) 13 дек 2017 в 8:58
  • Не за что) Правку вашу отклонил в виду наглядности примера (отказ от id)
    – DaemonHK
    13 дек 2017 в 9:07
0

Если использование таблиц не критично, то я бы сделал с flexbox. Надеюсь я правильно понял чего необходимо добиться.

.services__card,
.services {
  display: flex;
}

.services{
    text-align: center;
    font-family:'Exo', sans-serif;
    overflow: hidden;
}

.services > div {
    background-color: #f8f8f8;
    padding: 2%;
}

.services > div > img {
    border-radius: 5px;
    align-self: center;
}

.services h1 {
    margin-top: -1%;
    font-weight:500;
    font-size:3vw;
}

.services p{
    width: 70%;
    margin: 0 auto 2% auto;
    font-weight:100;
    font-size:1.2vw;

}

.white_btn{
    border: 3px solid white;
    color: #b52519;
}

.white_btn a {
    color: white;
}

.white_btn:hover{
    background-color: white;
}

.white_btn:hover a{
    color:#b52519;
}

.red_btn{
    border: 3px solid #b52519;
    color: white;
}

.red_btn a{
    color: #b52519;
}

.red_btn:hover {
    background-color: #b52519;
}

.red_btn:hover a{
    color: white;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:100|Exo:100,200,300,500,700|Raleway:100,200,300,500" rel="stylesheet">
<div class="services">
  <div id="for_clients" class="services__card">
    <img src="https://i.stack.imgur.com/VCwnv.jpg">
    <div id="for_clients_block">
      <h1>FOR CLIENTS</h1>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu. bsdfjfajadjpsifjci dh oas voshv .
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur nobis consequuntur quas? Autem sunt nam perferendis est, numquam delectus beatae.</p>
      </p>
      <button class="order red_btn services_button"><span><a href="for_clients.php">Learn more</a></span></button>
    </div>
  </div>
  <div id="for_partners" class="services__card">
    <div id="for_parents_block">
      <h1>FOR PARTNERS</h1>
      <p>Lorem ipsum dolor sit amet, vix ad postea putent, maiorum fierent ad vim, vix no rebum adipiscing. Usu illud dicit affert an, cu ponderum detraxit scribentur qui, an choro appetere philosophia nam. Ut meis exerci nam, vis quaeque epicurei moderatius
        at, quot feugait nec eu.
      </p>
      <button class="order red_btn services_button"><span><a href="for_partners.php">Learn more</a></span></button>
    </div>
    <img src="https://i.stack.imgur.com/SwSBO.jpg">
  </div>
</div>

2
  • Спасибо тебе за помощь) 13 дек 2017 в 8:58
  • Рад, что мой ответ помог. Скажи, если вдруг что нужно будет что-то уточнить.
    – Morshinin
    13 дек 2017 в 9:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.