使用 css 和 HTML5 定位图像

我是最近几天的html5和css新手，我玩得很好，但现在我遇到了问题。实际上图像没有正确对齐，在三张图像之后，第四张图像转到第二行，但不在上图下，而是在菜单/导航下

我在文章标签之前使用了导航，但是当我使用边框检查我的文章标签包含多少区域时，导航菜单就会出现.. 我有点困惑，请帮忙。.这是我的代码

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="UTF-8">
    <title>Home</title>
    </head>

        <body>
            <header>
                    <hgroup>
                    <h1>The Luxe Collection</h1>
                            <img src="graphics/header.jpg">
                            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
                    </hgroup>
            </header>
<nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Special Offers</a></li>
            <li><a href="#">Log In</a></li>
            <li><a href="#">Account</a></li>
            <li><a href="#">Basket</a></li>
            <li><a href="#">Checkout</a></li>
        </ul>
</nav>
            <article>
                        <header>
                            <h1>Hello Google user!     Welcome to Luxe Collections. What would you like to do?</h1>
                        </header>
                            <section>
                            <img class="items" src="graphics/item1.jpg">
                            <img class="items" src="graphics/item2.jpg">
                            <img class="items" src="graphics/item3.jpg">
                            <img class="items" src="graphics/item4.jpg">
                            <img class="items" src="graphics/item5.jpg">
                            <img class="items" src="graphics/item6.jpg">
                            <img class="items" src="graphics/item7.jpg">
                            <img class="items" src="graphics/item8.jpg">
                            <img class="items" src="graphics/item9.jpg">
                            <img class="items" src="graphics/item10.jpg">
                            <img class="items" src="graphics/item11.jpg">
                            <img class="items" src="graphics/item12.jpg">
                            </section>
            </article>          
        </body>
</html>

这是我的CSS，我用它来对齐这些图像，我不发布仅与图像相关的CSS

nav {
    margin-left:15px;
    padding:0px;
    float:left;
    width:160px;
                }
nav ul {margin:0px;
         padding:0px;
        display:block;} 
nav ul li {margin-left:20px;
         padding:0px;
        list-style:none;
        padding-left:0px;
        line-height:2.5em;
        }
nav ul li a {display:block;
        text-decoration:none;
        font-family:"Kaushan Script";
        color:#CC123B;}
article {
        padding:10px;
        margin:0px;
          }
article header h1 {
                font-family:"Kaushan Script";
                  text-align:center;
                font-size:20px;
                color:#CC123B;
                    }
.items {
display:inline;
padding-right:10px;
margin:10px;
width:180px;
height:200px;
clear:both;
}

您是否正在寻找这个（您也可以将其应用于文章）：

section
{
  margin-left: 160px;
}

相关内容

最新更新

热门标签：