Html/css Div 不会彼此对齐

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

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

你所要做的就是我在下面使用 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 2

如果您决定使用 pull-left 使灰色和红色框对齐 - 您应该将 class 放在它们两个上。

这是一个示例（如果您只单击 "run code snippet"，它将无法在代码段中工作 - 您必须在整页中打开它 [检查右上角]).

#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 3

如果您正在使用 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/) or for better understanding, use w3schools bootstrap examples here: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 4

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

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

Answer 5

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

#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>

Html/css Div 不会彼此对齐

Html/css Div wont align beside each other

html

css

web-deployment

twitter-bootstrap