div ширина свойство с контентом

Question

У меня есть два div и они имеют некоторую ширину. Но я хочу, чтобы каждый div занимал полное пространство, поскольку оно задано в свойстве width независимо от содержимого внутри div s. В настоящее время каждый div занимает пространство относительно содержимого внутри них и игнорирует то, что задано в свойстве width.

Мой HTML приводится ниже,

<div style="margin-left:100px; display:inline; border-width:10px; width:30%; border-  style:solid;"> 
fawad 
</div> 
<div style=" margin-left:10px; display:inline; border-width:10px; width:30%; border-style:solid">ali</div> 

Answer 1

Просто измените

display:inline; 

к:

display: inline-block; 

http://jsfiddle.net/osx76nbr/

Answer 2

Попробуйте добавить

div { float:left } 

Это сделает дивы уважайте имуществом.

Answer 3

Вы можете использовать свойство css display:inline-block;. Это поможет установить div inline с блоком.

Answer 4

Вам необходимо применить стиль блока display. В этом случае я бы применить

<div style="margin-left:100px; display:inline-block; border-width:10px; width:30%; border-  style:solid;"> 
fawad 
</div> 
<div style=" margin-left:10px; display:inline-block; border-width:10px; width:30%; border-style:solid">ali</div> 

В качестве альтернативы я бы применить все эти параметры в таблице стилей и применить класс к DIV вместо того, чтобы иметь встроенные стили, как это.

.inline-div { 
    display: inline-block; 
    border: 10px solid; 
    width: 30%; 
} 

<div class="inline-div"></div> 

Еще лучше я хотел бы посмотреть в систему сетки так же, как те, найти в bootstrap или foundation. Таким образом, вы можете просто применить стили сетки.

<div class="row"> 
    <div class="col-4"> 
    <div class="col-4"> 
    <div class="col-4"> 
</div> 

Answer 5

Единственное, что было необходимо

display:inline-block; 

Это все