Question

这就是我的页面现在的样子：

我希望红色部分位于最后一个投注框或灰色区域旁边。我正在使用bootstrap，我尝试左拉，但这只是把它设置得太远了。我希望它在一旁。这就是我的Html（对于那个区域）的样子：

#lasttxt{
    text-align:center;
    padding-top: 10px;
    font-size: 30px;
    color:black;
}
#lastfill{
    overflow: hidden;
    overflow:auto;
}
#lastwrap{
    left:0;
    right:0;
    width: 350px;
    min-height:600px;
    max-height: 1000px;
    margin-left:90px;
    background-color: grey;
}
#mainwrap{
    min-width: 400px;
    max-width: 800px;
    min-height: 700px;
    max-height: 1000px;
    background-color: red;
}
#betarea{
position: relative;
}

 <!-- Last bets -->
<div class="row">
<div id="lastwrap">
    <p id="lasttxt">Last Bets</p>
    <div id="lastfill"></div>
</div>

    <!-- /last bets -->

    <!-- Main_betsection -->
    <div id="mainwrap" class="">
    
    

    <div id="betarea">
    </div>
    


    </div>

</div>

我尝试了一切，我觉得很蠢，所以这是我最后一次尝试做到这一点。

请帮忙

Answer 1

如果你正在使用bootstrap，请尝试这样的事情。

<div class="row">
   <div class="col-sm-6">
     <div class="panel panel-default">
      <div class="panel-body">A Basic Panel</div>
     </div>
   </div>
   <div class="col-sm-6">
     <div class="panel panel-default">
      <div class="panel-body">A Basic Panel</div>
     </div>
   </div>
</div>

这将为您提供两个面板，尺寸为“6”，彼此相邻，基本上可以做您想要它做的事情。看看这里的Bootstrap列（https://getbootstrap.com/examples/grid/）或为了更好地理解，请在这里使用w3schools bootstrap示例：http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 2

好的，所以我做了一些小改动：

#lasttxt{
    text-align:center;
    padding-top: 10px;
    font-size: 30px;
    color:black;
}
#lastfill{
    overflow: hidden;
    overflow:auto;
}
#lastwrap{
    margin-left:5%;    
    width: 350px;
    min-height:600px;
    max-height: 1000px;
    background-color: grey;
}
#mainwrap{
    min-width: 400px;
    max-width: 800px;
    min-height: 700px;
    max-height: 1000px;
    background-color: red;
}
#betarea{
position: relative;
}

.align{
 margin-left:5%;    
}

<html>
<head>
<link href="html.css" rel="stylesheet" />    
</head>
<body>
 <!-- Last bets -->
<div class="row">
<div id="lastwrap">
    <p id="lasttxt">Last Bets</p>
    <div id="lastfill"></div>
</div>

    <!-- /last bets -->

    <!-- Main_betsection -->
    <div id="mainwrap" class="align">
    
    

    <div id="betarea" class="align">
    </div>
    


    </div>

</div>
    </body>
</html>

Answer 3

我知道表格不应该用于格式化，所以请不要因为这个原因而向我投票，但这是解决问题的有效方法。

我所要做的就是使用table元素将下面的内容作为片段添加。

注意

这根本不需要CSS。

#lasttxt { text-align: center; padding-top: 10px; font-size: 30px; color: black; } #lastfill { overflow: hidden; overflow: auto; } #lastwrap { left: 0; right: 0; width: 350px; min-height: 600px; max-height: 1000px; margin-left: 90px; background-color: grey; } #mainwrap { min-width: 400px; max-width: 800px; min-height: 700px; max-height: 1000px; background-color: red; } #betarea { position: relative; }

<div class="row"> <table> <tbody> <tr> <td> <div id="lastwrap"> <p id="lasttxt">Last Bets</p> <div id="lastfill"></div> </div> </td> <td> <div id="mainwrap"> <div id="betarea"> </div> </div> </td> </tr> </tbody> </table> </div>

Answer 4

如果您决定使用pull-left要使灰色和红色框对齐 - 您应该将该类放入其中。

以下是一个示例（如果您只是点击“运行代码段”，它将无法在代码段中使用 - 您必须在整页中打开它[检查右上角]）。

#lasttxt{
    text-align:center;
    padding-top: 10px;
    font-size: 30px;
    color:black;
}
#lastfill{
    overflow: hidden;
    overflow:auto;
}
#lastwrap{
    left:0;
    right:0;
    width: 350px;
    min-height:600px;
    max-height: 1000px;
    margin-left:90px;
    background-color: grey;
}
#mainwrap{
    min-width: 400px;
    max-width: 800px;
    min-height: 700px;
    max-height: 1000px;
    background-color: red;
}
#betarea{
position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Last bets -->
<div class="row">
<div id="lastwrap" class="pull-left">
    <p id="lasttxt">Last Bets</p>
    <div id="lastfill"></div>
</div>

    <!-- /last bets -->

    <!-- Main_betsection -->
    <div id="mainwrap" class="pull-left">
    
    

    <div id="betarea">
    </div>
    


    </div>

</div>

Answer 5

您还可以对div元素使用display：table-cell。

http://jsbin.com/kasobo/edit?html,css,output

Html / css Div不会彼此对齐

5 个答案: