Question

您好我正在尝试并排产生盒子我不知道该怎么办我尝试过使用Float:left;，但也没有用这是我的css代码

    <style>
div.heh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
  border: .5px solid #e3e3e3;
  border-radius: 1px;
  padding: 19px;
  margin-bottom: 5px;
  min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:left
float:left;
}
div.hehh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
  border: .5px solid #e3e3e3;
  border-radius: 1px;
  padding: 19px;
  margin-bottom: 5px;
  min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:right
float:right;
}

</style>
<!------- here is the HTML Structure ----->
  <div class="heh" align="left">
        <h3>SteamRep:<button type="button" class="btn btn-default"  >Normal</button><br>
        <a href="http://backpack.tf/id/712">View Backpack</a><br>
        <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
        </h3>
      </div>
      <div class="hehh">
      <h3>Positive Reputation:<font color="green">100</font><br>
      Negative Reputation:<font color="red">1</font></br>
      Total Raffles Participated:<font color="green">12</font><br>
      Warnings Received:<font color="red">0</font><br>      

      </h3>    
      </div>

在上面的代码中，方框会产生在彼此之下我不知道出了什么问题我在其他地方搜索过也没有找到太多资源这里是图像 thats the image

Answer 1

float:left;是可行的方法，但我认为它们在父容器中不能彼此相邻。因此，他们希望彼此相邻，但由于这是不可能的，因此它们将显示在彼此之下。

因此，您需要使父容器更宽，或者子div更小。

Answer 2

减小div的宽度并使用宽度：200px; 它会工作

Answer 3

此Css方法还可以帮助您在css中创建响应式Web站点并减少代码冗余。

HTML

<div class="heh" align="left">
    <h3>SteamRep:<button type="button" class="btn btn-default"  >Normal</button><br>
        <a href="http://backpack.tf/id/712">View Backpack</a><br>
        <a href="http://www.tf2outpost.com/user/285419">View TF2Outpost</a>
    </h3>
</div>
<div class="heh last">
    <h3>Positive Reputation:<font color="green">100</font><br>
        Negative Reputation:<font color="red">1</font></br>
        Total Raffles Participated:<font color="green">12</font><br>
        Warnings Received:<font color="red">0</font><br>      
    </h3>    
</div>

的CSS

div.heh
{
    float:left;
    width:42%;
    height:200px;
    border:1px solid black;
    background-color: #f5f5f5;
    border: 5px solid #e3e3e3;
    border-radius: 1px;
    padding: 19px;
    margin-bottom: 5px;
    min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-align:left
    float:left;
    margin-right:5px;
}
.heh.last{margin:0 !important;}

Answer 4

只需将display:inline-block添加到两个div css类中每个div大小为550px，因此如果屏幕大小超过1100px，则只能并排显示

<强> CSS

div.heh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
  border: .5px solid #e3e3e3;
  border-radius: 1px;
  padding: 19px;
  margin-bottom: 5px;
  min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:left;
float:left;
    display:inline-block
}
div.hehh
{
width:550px;
height:200px;
border:1px solid black;
background-color: #f5f5f5;
  border: .5px solid #e3e3e3;
  border-radius: 1px;
  padding: 19px;
  margin-bottom: 5px;
  min-height: 10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-align:right;
float:right;
    display:inline-block
}

Fiddle

如何并排产生盒子

4 个答案: