使用css和HTML5定位图像_Css_Html

使用css和HTML5定位图像

css html

使用css和HTML5定位图像,css,html,Css,Html,我是html5和css的新手，过去几天我玩得很好，但现在我遇到了一个问题。实际上，图像没有正确对齐，在三个图像之后，第四个图像转到第二行，但不在上面的图像下，而是在菜单/导航下我在文章标签之前使用过导航，但当我使用border检查文章标签包含的区域时，导航菜单就出现了。。我有点困惑，请帮忙……这是我的代码 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/cs

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

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

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

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

在jsbin.com或类似的服务上制作一个示例。帮助人们解决您的问题是一个很好的做法。您有一些无效的HTML，

img

是自动关闭的，

hgroup

不在HTML规范中。您认为只有这些才是造成问题的原因吗？？是的，我认为我遗漏了一些东西，否则它就不应该这样做..请创建一个JSFIDLE…@user2989588验证标记/css应该是调试代码错误的第一步。非常感谢，它现在解决了问题。。但我知道我的html中有问题：）thanx:）

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;
}