0

Я взял шаблон бутстраповский и сделал:

.onesecondswidth{
    width: 50% !important;
    background-color: #112233;
    height: auto !important;
    margin: 0 !important;
    padding: 0px !important;
    display: inline-block !important;
}
.onesecondswidth img{
    width: 100% !important;
    height: auto !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.full-width{
    width: 100%;
}.wb {
	padding-top: 35px;
	margin-bottom: 0px;
}
 <div class="full-width">
  <div class="wb"><center><h4>Примеры работ</h4></center></div>
    <div class="col-lg-4 onesecondswidth">
    <img src="http://www.kulturologia.ru/files/u18214/LeonardoVecchiarino_3.jpg">
    </div>
    <div class="col-lg-4 onesecondswidth">
    <img src="http://2.bp.blogspot.com/-LlJbpfXeNu8/Ut0AqHtC_WI/AAAAAAABL8Y/h1_cJnIEugw/s1600/Caras_Ionut_06.jpg">
    </div>
    <div class="col-lg-4 onesecondswidth">
    <img src="http://newpix.ru/wp-content/uploads/2012/11/Silvia_Cordedda_Fractals_19.jpg">
    </div>
    <div class="col-lg-4 onesecondswidth">
    <img src="http://img0.liveinternet.ru/images/attach/c/2//69/327/69327737_1295186543_6b853289e73ft.jpg">
    </div>
  </div>

И при ширине меньше 1183рх оно у меня перестает быть в ряд.

Попробовал: display со всеми атрибутами, в том числе и inlie-block и float зачем-то все паддинги и марджины не больше нуля. Помогло, конечно, уменьшение ширины блока до 48% с 50%, но это не то, что нужно.

Как выставить в ряд?

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 29 сен 2015 в 14:00

3 ответа 3

1

Вы, вероятно, удивитесь, но достаточно убрать пробелы (и переносы строки) между блоками с изображениями - display:inline-block принимает их во внимание (правда, это не поможет в случае ie7).

<div class="wb"><center><h4>Примеры работ</h4></center></div>
    <div class="col-lg-4 onesecondswidth">
    <img src="http://www.kulturologia.ru/files/u18214/LeonardoVecchiarino_3.jpg">
    </div><div class="col-lg-4 onesecondswidth">
    <img src="http://2.bp.blogspot.com/-LlJbpfXeNu8/Ut0AqHtC_WI/AAAAAAABL8Y/h1_cJnIEugw/s1600/Caras_Ionut_06.jpg">
    </div><div class="col-lg-4 onesecondswidth">
    <img src="http://newpix.ru/wp-content/uploads/2012/11/Silvia_Cordedda_Fractals_19.jpg">
    </div><div class="col-lg-4 onesecondswidth">
    <img src="http://img0.liveinternet.ru/images/attach/c/2//69/327/69327737_1295186543_6b853289e73ft.jpg">
    </div>
</div>

Либо, вы можете указать float:left для класса onesecondswidth - это тоже работает.

Edit: Есть и более оригинальные решения. Можно, например, избавить от пробелов между элементами с помощью пустых комментариев.

<div class="full-width">
    <div class="col-lg-4 onesecondswidth">
    <img src="http://www.kulturologia.ru/files/u18214/LeonardoVecchiarino_3.jpg">
    </div><!--
    --><div class="col-lg-4 onesecondswidth">
    <img src="http://2.bp.blogspot.com/-LlJbpfXeNu8/Ut0AqHtC_WI/AAAAAAABL8Y/h1_cJnIEugw/s1600/Caras_Ionut_06.jpg">
    </div><!--
    --><div class="col-lg-4 onesecondswidth">
    <img src="http://newpix.ru/wp-content/uploads/2012/11/Silvia_Cordedda_Fractals_19.jpg">
    </div><!--
    --><div class="col-lg-4 onesecondswidth">
    <img src="http://img0.liveinternet.ru/images/attach/c/2//69/327/69327737_1295186543_6b853289e73ft.jpg">
    </div>
</div>

Или переносить закрывающий ">" на другую строку

<div class="full-width">
    <div class="col-lg-4 onesecondswidth">
    <img src="http://www.kulturologia.ru/files/u18214/LeonardoVecchiarino_3.jpg">
    </div
    ><div class="col-lg-4 onesecondswidth">
    <img src="http://2.bp.blogspot.com/-LlJbpfXeNu8/Ut0AqHtC_WI/AAAAAAABL8Y/h1_cJnIEugw/s1600/Caras_Ionut_06.jpg">
    </div
    ><div class="col-lg-4 onesecondswidth">
    <img src="http://newpix.ru/wp-content/uploads/2012/11/Silvia_Cordedda_Fractals_19.jpg">
    </div
    ><div class="col-lg-4 onesecondswidth">
    <img src="http://img0.liveinternet.ru/images/attach/c/2//69/327/69327737_1295186543_6b853289e73ft.jpg">
    </div>
</div>
1

Если я правильно Вас понял, то вот так:

.onesecondswidth {
      background-color: #112233;
      height: auto !important;
      margin: 0 !important;
      padding: 0px !important;
    }
    .onesecondswidth img {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    .wb {
      text-align: center;
      padding-top: 35px;
      margin-bottom: 0px;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="wb">
  <h4>Примеры работ</h4>
</div>
<div class="container-fluid">
  <div class="col-xs-3 onesecondswidth">
    <img src="http://www.kulturologia.ru/files/u18214/LeonardoVecchiarino_3.jpg">
  </div>
  <div class="col-xs-3 onesecondswidth">
    <img src="http://2.bp.blogspot.com/-LlJbpfXeNu8/Ut0AqHtC_WI/AAAAAAABL8Y/h1_cJnIEugw/s1600/Caras_Ionut_06.jpg">
  </div>
  <div class="col-xs-3 onesecondswidth">
    <img src="http://newpix.ru/wp-content/uploads/2012/11/Silvia_Cordedda_Fractals_19.jpg">
  </div>
  <div class="col-xs-3 onesecondswidth">
    <img src="http://img0.liveinternet.ru/images/attach/c/2//69/327/69327737_1295186543_6b853289e73ft.jpg">
  </div>
</div>

1
  • col-xs-(от 0 до 12) - ширина блока
    – sashatexb
    28 сен 2015 в 22:50
1

Вы используете display: inline-block, и так как у Вас в коде присутствуют пробельные символы между блоками, то между двумя соседними inline-block'ами возникает пробел при отображении (если бы код html был минифицирован, их бы не было).

Для борьбы с этим есть 2 способа:

  • кривой способ: задать отрицательный margin, который "уберет" пробел (плох способ тем, что размер пробела зависит от шрифта + операционной системы)
  • нормальный способ: задать обертке font-size: 0 (тогда пробел будет, но его размер известен - он 0), но есть неудобство - придется всем внутренним блокам задать font-size заново.

В данном случае (если не менять html):

.full-width {
   font-size: 0;
}

.full-width div {
   font-size: 12px; /* Например так */
}
1
  • С font-size: 0, думаю, самый оптимальный вариант :)
    – VeroLom
    1 июн 2016 в 12:49

Ваш ответ

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

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