Question

我试图让两个不均匀的列靠近在一起，但我不确定在编写代码时我出错的地方。输入这些列时，列会跨越页面的宽度，我希望它总共大约为720px，主列为520px，辅助列为200px。

我尝试了大约30种不同的东西，几乎改变了所有变量，并在所有div周围添加随机＆＃34; align = /：center＆＃34;

我不太确定，我真的可以使用一些帮助。我在最近5个小时的工作中一直在努力，这需要做，我不能理解:( 非常感谢！

    <style>



.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden; }
.left {  float:left; width:75%; }
.right {  float:right; width:25%;  }


</style>




</head>
<body bgcolor="#ffffff">
<center>

  <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">

    <tr>
      <td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0" alt=""></td>
    </tr>
    <tr>
      <td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0" alt=""></td>
    </tr>
</table>

      </center>




<div class="table">

    <div class="left">
            <h1>From the President</h1>
        <p></p>
        <p>Dear Friends,</p>
        blah
    </div>

    <div class="right">  

    <h1>From Students</h1> 
       -&quot;<b>derp&quot;<br>
          </b>
    </div>        
</div>



</center>


{embed="embeds/global_footer"}
</body>
</html>

Answer 1

left .table {border：0px solid black; 填充：10px的; 最大宽度：723px; 溢出：隐藏; 保证金：0自动; }

因此，请将margin:0 auto;添加到table类。

更新

<style type="text/css">

<style>

删除其中一个......：）

取而代之的是：

<div class="right"> <div class="right" padding-right="100px"> <h1>From Students</h1> -&quot;<b>derp</b> </div> </div>

试试这个：

<div class="right"> <div style='padding-left:15px'> <h1>From Students</h1> -&quot;<b>derp</b> ....</div> </div>

Answer 2

您需要进行3项更改：

1）最重要 - 你需要一个doctype！否则，这会将浏览器推入怪癖模式，进而无法进入人类的土地。始终包括：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

2）删除底部的悬空</center>标签。

3）在我发布之前添加margin: 0 auto;作为绅士。这个css相当于html <center>标记。

最终结果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Float center</title>

   <style>



.table { border:0px solid black; padding:10px; max-width:723px; overflow:hidden;  margin: 0 auto;}
.left {  float:left; width:75%; }
.right {  float:right; width:25%;  }


</style>




</head>
<body bgcolor="#ffffff">
<center>

  <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="723">

    <tr>
      <td colspan="3"><img name="gala_r1_c1" src="/images/gala_r1_c1.jpg" width="720" height="42" border="0" 

alt=""></td>
    </tr>
    <tr>
      <td colspan="3"><img name="gala_r2_c1" src="/images/gala_r2_c1.jpg" width="720" height="283" border="0" 

alt=""></td>
    </tr>
</table>

      </center>




<div class="table">

    <div class="left">
            <h1>From the President</h1>
        <p></p>
        <p>Dear Friends,</p>
        blah
    </div>

    <div class="right">  

    <h1>From Students</h1> 
       -&quot;<b>derp&quot;<br>
          </b>
    </div>        
</div>


{embed="embeds/global_footer"}
</body>
</html>

快照：

final result

HTML Div Float不会居中

2 个答案: