0

我正在尝试使两个不均匀的列靠得很近，但是我不确定在编写代码时哪里出错了。输入这些后，列会跨越页面的宽度，我希望总宽度约为 720 像素，主列为 520 像素，辅助列为 200 像素。

我已经尝试了大约 30 种不同的东西，改变了几乎所有的变量，并在所有 div 周围添加了随机的“align=/:center”。

我不太确定，我真的可以使用一些帮助。在过去 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>
4

2 回答 2

1

left .table { 边框：0px 纯黑色；填充：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>
于 2013-06-12T16:43:24.887 回答
0

您需要进行 3 项更改：

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

2) 取下</center>底部的悬挂标签。

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

最终结果：

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

快照：

最后结果

于 2013-06-12T17:12:33.223 回答