Как я могу иметь 4 div внутри div, которые все равны по размеру и не соединены вместе? - PullRequest
Новая
       7

Как я могу иметь 4 div внутри div, которые все равны по размеру и не соединены вместе?

2 голосов
/ 14 июля 2010

Ответы [ 5 ]

2 голосов
/ 14 июля 2010

Простой способ достичь желаемого: использование float:left работает на вас 

<div style="width:100%">
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div1
   </div>
   <div style="width:45%; ">  
      div2
   </div>
 </div>
 <div style="width:100%">
   <div style="width:45%; float:left">  
      div3
   </div>
   <div style="width:45%; ">  
      div4
   </div>
 </div>      
</div>
2 голосов
/ 14 июля 2010

Используйте float и margin для решения вашей проблемы, как уже предложено rahul . Чтобы иметь 2 поплавка рядом друг с другом, используйте width.

CSS: 

.outer {
  border: 1px solid black;
  width: 100%;
  float: left;
}

.inner {
  margin: 10px;
  float:left;
  width:45%;
  border: 1px solid black;
}

HTML: 

<div class="outer">
  <div class="inner">div</div>
  <div class="inner">div</div>
  <div class="inner">div</div>
  <div class="inner">div</div>
</div>

Я использовал 45% для ширины поплавков, чтобы убедиться, что они подходят. 50% не работает из-за margin. 45% можно было бы увеличить немного больше, я думаю, но это зависит от поля внутренних элементов.

1 голос
/ 14 июля 2010

Это может быть ваш HTML: 

<div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
</div>

И это может быть ваш CSS: 

div {
    float: left; /* so the surrounding div takes only the size of its content */
    padding: 20px 0 0 20px; /* to get the same spacing everywhere */
    overflow: hidden; /* this is not needed but i like to use it because clients never do what they shoul :P */
    border: 4px solid black;
}

div > div {
    float: left; /* places the divs next to each other */
    width: 50px;
    height: 50px;
    margin: 0 20px 20px 0; /* makes the space between the divs */
    border: 4px solid black;
}

div > div:nth-child(3n) {
    clear: both; /* you want the 3rd div to start a new line */
}

, и это будет результатом: http://jsfiddle.net/NgjaY/1/

0 голосов
/ 14 июля 2010

попробуйте этот код 

<html>
<head>
<style type="text/css">
#main   {
    width:130px;
    padding:10px 0px 0px 0px;
    height:auto;
    overflow:hidden;
    background-color:#171817;
}

.div1   {
    width:50px;
    height:50px;
    float:left;
    display:inline;
    margin:0px 0px 10px 10px;
    background-color:white; 
}
</style>
</head>
<body>
<div id="main">
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
</div>
</body>
</html>
0 голосов
/ 14 июля 2010

Если вы хотите, чтобы div были рядом, вы можете использовать свойство float.Если вы хотите разделить div, вы можете использовать свойство margin.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...