Нельзя складывать несколько divs горизонтально вместе без поплавка?

-3

Недавно я понял, что мы не можем выровнять несколько div внутри контейнера горизонтально - без пробела между ними и без использования float.Нельзя складывать несколько divs горизонтально вместе без поплавка?

Я применил inline-block к divs внутри элемента контейнера и дал им width в %. но, похоже, есть дополнительное пространство. Я знаю, что это из-за скрытых персонажей. См ниже изображения - Красная линия контейнера

Я хочу, чтобы это сделать, как на рисунке ниже, используя inline-block и занимают всю ширину контейнера. Я не могу использовать flexbox для родителя, так как хочу сделать его отзывчивым и скрыть/переместить некоторые элементы после контрольных точек. Я также не хочу использовать float, так как он вытаскивает внешние элементы и делает элемент контейнера бесполезным. Кроме того, бессмысленно удалять пробелы и вкладки, чтобы заставить его работать ... было бы бесполезно вводить код там.

Теперь давай CSS, там должно быть что-то. Это не должно быть разочарование, и CSS не должен быть таким глупым.

Вот мой код,

.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #158; 
 
}

<div class="container"> 
 

 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 

 
</div> 
 

 
<!-- Content Area --> 
 
<div class="section content"> 
 

 
</div> 
 

 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 

 
</div> 
 

 
</div>

источник

2016-11-30 Abhishek Pathak

Просто удалите пространство между 'div'. –

http://stackoverflow.com/q/5078239/483779 – Stickers

@PraveenKumar Это то, что я не хочу делать ... Я видел эти ответы. Было бы очень сложно организовать код. Я не могу кодировать неудобное форматирование –

Я наткнулся на этом вопрос в последнее время и то, что я узнал, что при использовании встроенного блока для выравнивания дивы. HTML-браузер автоматически добавляет по умолчанию маржу справа от каждого блока div из-за размера шрифта. Единственное решение, которое я нашел хорошим в моем сценарии, заключалось в том, чтобы присоединиться к divs, добавив исправление правого поля в размере -4px (пространство по умолчанию, используемое браузером из-за размера шрифта по умолчанию) на divs у нас есть стиль display:inline-block;.

Так что просто добавьте margin-right:-4px; в ваш класс .section, который вам будет полезен.

Вы также можете использовать font-size:0px; класс .container, чтобы это сделать, но это заставит вас сбросить размеры шрифтов для каждого элемента в контейнере, поэтому я пошел с решением корректировки поля.

Надеюсь, это поможет.

источник

2016-11-30 14:25:38

Для remove space между элементом, который помещают в inline-block, установите font-size:0px в parent div или второй вариант маркировки использование negative margin, как показано ниже,

#container{ 
 
    width:100%; 
 
    height:auto; 
 
    overflow:hidden; 
 
    border:2px solid red; 
 
    font-size:0px; 
 
} 
 
#container > .homebar{ 
 
width:33.2%; 
 
height:200px; 
 
display:inline-block; 
 
background:yellow; 
 
} 
 
#container > .content{ 
 
width:33.3%; 
 
height:200px; 
 
display:inline-block; 
 
background:green; 
 
} 
 
#container > .sidebar{ 
 
width:33.3%; 
 
height:200px; 
 
display:inline-block; 
 
background:blue; 
 
}

<div id="container"> 
 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 
</div> 
 
<!-- Content Area --> 
 
<div class="section content"> 
 
</div> 
 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 
</div> 
 
</div>

источник

2016-11-30 14:26:18 frnt

причина, почему вы получите эти пробелы из-за размера шрифта div. Пожалуйста, обратите внимание на решение:

div { 
 
    border: 1px solid black; 
 
    font-size: 0; 
 
} 
 

 
.container{ 
 
\t width: 100%; 
 
\t height: auto; 
 
} 
 

 
.section{ 
 
\t display: inline-block; 
 
} 
 

 
.homebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #222; 
 
} 
 
.content{ 
 
\t width: 50%; 
 
\t min-width: 500px; 
 
\t height: 600px; 
 
\t background-color: #fbfbfb; 
 
} 
 
.sidebar{ 
 
\t width: 24%; 
 
\t height: 600px; 
 
\t background-color: #158; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="container"> 
 

 
<!-- Home/Menu Bar--> 
 
<div class="section homebar"> 
 

 
</div> 
 

 
<!-- Content Area --> 
 
<div class="section content"> 
 

 
</div> 
 

 
<!-- Sidebar Area --> 
 
<div class="section sidebar"> 
 

 
</div> 
 

 
</div 
 
</body> 
 
</html>

В принципе, я всегда использую normalize в моих страницах, чтобы решить проблемы, с самого начала.

источник

2016-11-30 14:27:04 Chen

Нельзя складывать несколько divs горизонтально вместе без поплавка?

ответ

Смежные вопросы