0

您好，我正在尝试并排生成盒子我不知道该怎么做我尝试过使用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>

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

4

4 回答 4

0

float:left;是要走的路，但我认为它们不适合在父容器中彼此相邻。因此，它们希望彼此相邻，但由于那是不可能的，因此它们将显示在彼此下方。

所以你需要让父容器更宽，或者子 div 更小。

于 2013-11-07T11:04:15.327 回答
0

减小 div 的宽度并使用 width:200px; 它会起作用的

于 2013-11-07T11:11:34.853 回答
0

这种 Css 方法还将帮助您制作响应式网站并减少 css 中的代码冗余。

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;}
于 2013-11-07T11:25:20.560 回答
-1

只需添加display:inline-block到两个 div css 类每个 div 大小为 550 像素，因此如果屏幕大小高于 1100 像素，则仅并排显示

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
}

小提琴

于 2013-11-07T11:10:46.770 回答