Question

我将在这个问题的前言中说明我历史上使用表格进行HTML格式化并且相当擅长让它看起来像我喜欢的方式...我知道表格是用于“表格数据”而不是格式化。当我尝试以“正确的方式”做这件事时，我总是感到有些沮丧，所以今天我正在寻求帮助。

<div style="width: 90%;">

  <div style="width: 50%; height: 75px; vertical-align: middle; float: left;">
    <a href="a.html" style="margin: auto 0px auto 0px">
      <img src="../../images/red_arrow_50.png" alt="a" width="50" height="50" style="border-width: 0px;" />
    </a>
    <a href="a.html" style="margin: auto 0px auto 0px;">A Link</a>                        
  </div>

  <div style="width: 50%; float: right;">
    <a href="b.html">B Link</a>                        
  </div>

</div>

从我上面的尝试可以看出，我希望图像链接和所有2个文本链接沿同一水平线排列（即图像中心的文本链接）。根据父div的宽度，我希望A img / link和B链接彼此之间的距离合理。我也喜欢div的“float：left”和“float：right”样式到 not 向南延伸超出父div的边界（出于某种原因，它对我这样做了在firefox中使用上面的代码）。

请帮我装笔直？我是唯一一个发现格式化事物的“正确方法”的人是后方的巨大痛苦吗？我希望我错过了一些重要的东西，如果纠正会让我走上正确的道路。

===============

更新，感谢您的评论，我去了jsfiddle并摆弄了一个基于表格的解决方案：

   <table style="width: 90%; margin: 0px auto 0px auto;">
        <tr>
            <td style="width: 50%;"><a href="a.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="A" width="50" height="50" style="border-width: 0px; vertical-align: middle;" /></a><a href="a.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >A-Link</a></td>
            <td style=""><a href="b.htm"><img src="http://www.chemfindit.com/img/search_icon.jpg" alt="B" width="50" height="50" style="border-width: 0px; vertical-align:middle;" /></a><a href="b.htm" style="margin: auto 0px auto 0px; vertical-align: middle;" >B-Link</a></td>
        </tr>
    </table>

产生所需的布局：

Desired Layout

我认为，当我尝试使用基于div的布局时，一定是我对浮动和位置的误解/使用总是会刺痛我。

Answer 1

就我个人而言，我这样做 - http://jsfiddle.net/spacebeers/nWNPm/7/

.magLink {
        list-style: none; 
        height: 50px;
        float: left;
        margin: 0 50px 0 0;
}

.magLink li {
        float: left;
        height: 50px;
        display: table;
}

.magLink li a {
        height: 50px;
        display: table-cell;
        vertical-align: middle;
}


<ul class="magLink">
    <li><a href="#"><img src="http://www.whg.uk.com/Image/Magnifying_glass_1.gif" width="50" height="50" /></a></li>
    <li><a href="#">Link A</a></li>
</ul>

您只需复制<ul>即可拥有多个。只需调整右边距即可将它们分开。我已经在JSFIddle中设置了单链接，多链接和带有额外样式的链接的示例。

修改

JSFiddle的运行非常糟糕，所以这是输出的图像，以防它不能正常工作。

垂直对齐在CSS中可能是一个真正的痛苦，但布局表已经有了他们的日常人。让他们过上平日用于表格数据的日子。

Answer 2

~~据我所知，你的“飞行器”超出了父div，因为你有90％的两个50％宽度。尝试将它们设置为45％。~~然后在两个浮动容器上设置class或id，将它们设置为position:relative，同时在每个容器中设置链接和img将div浮动到position:absolute，然后使用left, right, top,和bottom将其移动到位（img和链接将仅限于相对定位的父div）。这有帮助吗？

修改

<div style="width: 90%;"> <div style="width: 50%; height: 75px; vertical-align: middle; float: left; position:relative;"> <a href="a.html" style="margin: auto 0px auto 0px;"> <img src="http://www.chemfindit.com/img/search_icon.jpg" alt="a" width="50" height="50" style="border- width: 0px;" /> </a> <a href="a.html" style="margin: auto 0px auto 0px; position:absolute; top:15px;">A Link</a> </div> <div style="width: 50%; float: right; height:75px; vertical-align: middle; position:relative;"> <a href="b.html" style="margin: auto 0px auto 0px; position:absolute; left:50px; top:15px;">B Link</a> <img src="http://www.chemfindit.com/img/search_icon.jpg" alt="b" width="50" height="50" style="border-width: 0px;" /> </div> </div>

这是与您的表格布局等效的代码。我会使用jsfiddle，但我得到了504错误...可能没有正确地说。：）

带样式的HTML格式 - 只需放弃并使用表格？

2 个答案: