Question

我有两个div，我希望div2将在div1旁边。我尝试过使用float:left和display:inline，但没有任何帮助。 Jsfiddle

怎么做？

P.S抱歉愚蠢的问题，但我正在学习

Answer 1

检查这个小提琴：

<div class="row" style="width: 390px;">
  <div id="div1" style="width: 190px; border: solid black 1px; float: left; margin-right: 5px;">
      Street
      <input class="form-rej-normal" type="text">
      <div class="errorMessage" id="User_street_em_" style="">
          Pole Ulica nie może być puste.
      </div>    
   </div>
   <div id="div2" style="width: 190px; border: solid black 1px; float: left;">
       Numer domu       
           <input class="form-rej-normal" type="text">      
               <div class="errorMessage" id="User_house_number_em_" style="">
                    Pole Ulica nie może być puste.
               </div>
    </div>
</div>

Answer 2

使用float: left和box-sizing: border-box：

#div1 , #div2{
    float: left;
    box-sizing: border-box;
}

JSFiddle：http://jsfiddle.net/95rmz/4/

Answer 3

然后，您可以尝试遵循此方法

<html>
<body>
    <div style="position:relative; width:auto; height:auto; float:left; border:solid red 1px;">
        this is div 1
    </div>
    <div style="position:relative; width:auto; height:auto; float:left; border:solid red 1px;">
        this is div 2
    </div>
</body>
</html>

出于测试目的，您还可以添加border:1px;以检查您的div标签是否占用的空间大于屏幕分辨率

Answer 4

减小div的宽度。如果第一个div是全宽，那么第二个div怎么能在它旁边。

Answer 5

问题是您没有正确计算宽度。您在主div上设置380px，并为每个包含的div提供190px。

如果您这样做会好的，但是您还在每个div周围添加了一个边框，所以现在每个div都有一个额外的2px（左侧1px和右侧1px），因此它们实际上每个192px。所以你可以通过几种方式解决它：

将主div设置为至少184px。
设置box-sizing: border-box;，这会导致浏览器将边框放入div中而不添加其宽度 - 有关更多数据，请参阅此处：http://css-tricks.com/box-sizing/

小提琴：http://jsfiddle.net/95rmz/6/

div旁边的Div

5 个答案: