Question

我有一个100％最小宽度的div，它包含2个表格元素。我在第一个表上使用float来使第二个对齐到右边，问题是如果第一个表太大，第二个表不会在第一个表旁边，因为第一个表占用的宽度超过100％。我想要的是它仍然位于第一个表旁边。

HTML

<div id="container">
   <table id="table1">
     <tr>
      .
      </tr>
      <tr>
      .
      </tr>
      .
      .
      .
   </table>
   <table id="table2">
       ....
   </table>
</div>

CSS

#container {
  min-width: 100%;
  overflow: auto;
 }
#table1 {
 float: left;
}

问题是，当表格1超过100％宽度时，第二张表格不会移动到表格1旁边。

Answer 1

如果您正在谈论文字，那么

text-align: right;

或float: right;

Answer 2

您需要将其添加到CSS

#id_of_2nd_table{ float:right; }

使用float和clear： http://www.w3schools.com/css/css_float.asp

Answer 3

如果将最大宽度设置为50％，则应该这样做。

table{
  max-width:50%;
  float:left;
  border:1px solid black;
}

<table>
  <tr>
    <td>Jill asdf asdf asdf asdf asdf asdf asdf asdf asdf</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>
<table>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

如何强制元素强制转到元素旁边

3 个答案: