Question

我在PhotoShop中设计了图片1，这是我在HTML中的计划。

我将浮动添加到所有元素但由于某种原因我不明白它开始打破div（图片2）...我在这里错过了一些明显的东西吗？

[！[在此处输入图像说明] [1]] [1]

<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
    <div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
        <a href="/Main/">
            <img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86" />
        </a>
    </div>

    <div style="float:right;margin-top:10px;border: 1px solid black;">
        <img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42" />
    </div>

    <div style="clear:both;"></div>

    <div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
        <img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
        <img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
        <img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">

        <img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" />
    </div>


    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
        <img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png" />
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">

        <img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" />
    </div>



</div>

Answer 1

由于Read From First Page和Jump To Last Page图片的大小，对齐已关闭。给图像赋予宽度将其放置在左侧容器的侧面。

同时使用display:inline-block和vertical-align:middle将容器垂直对齐到中间。

以下是解释display:inline-block

用法的链接

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

修改了您的HTML代码

<div style="width: 974px; margin: 0 auto; background-color: white; padding: 0px;border: 0px solid black;">
    <div style="margin: 10px 0px 10px 0px; top: 0px; left: 0px; float: left;border: 1px solid black;">
    <a href="/Main/">
        <img src="http://s10.postimg.org/7qbv2a6jd/tb_logo_site3.png" width="180" height="86">
    </a>
    </div>

    <div style="float:right;margin-top:10px;border: 1px solid black;">
    <img src="http://s10.postimg.org/h8bm2bs7t/patreon_site3.png" width="280" height="42">
    </div>

    <div style="clear:both;"></div>

    <div style="margin-top:35px;margin-left:60px;float: left;border: 1px solid black;">
    <img src="http://s10.postimg.org/q9uqtofix/poster_1_site3.png" width="300" height="496">
    </div>

    <div style="float:left;margin-top:0px;margin-left:30px;border: 1px solid black;">
    <img src="http://s10.postimg.org/h9ljvqu1l/paper_soho_title_site3.png" width="400" height="114">
    </div>

    <div style="margin-top:0px;margin-left:30px;border: 1px solid black;display: inline-block;vertical-align: middle;">
    <img src="http://s10.postimg.org/mfwp6s8t5/fist_page_icon_site3.png">
    </div>

    <div style="margin-top:0px;margin-left:30px;border: 1px solid black;height: 100%;display: inline-block;">

    <img src="http://s10.postimg.org/4m175hpqx/first_page_site3.png" style="
    width: 230px;">
    </div>


    <div style="display: inline-block;margin-left:30px;border: 1px solid black;vertical-align: middle;">
    <img src="http://s10.postimg.org/7mi1m1121/last_page_icon_site3.png">
    </div>

    <div style="display: inline-block;margin-top:0px;margin-left:30px;border: 1px solid black;">

    <img src="http://s10.postimg.org/6vpbg8yop/last_page_site3.png" style="
    width: 230px;">
    </div>
</div>

Answer 2

你有太多的div，你必须调整边距/填充。看看This link ..

为什么CSS没有正确定位？

2 个答案: