Question

我可以用表强制这个布局，但我认为最好的做法可能是CSS中的一些显示/浮动设置。我有一个标题和菜单部分，按照需要工作。在它们下面是顶部，中间和底部部分，包裹丑陋。顶部应该有一个图像，后跟一个文本块。中间部分应该有3个相等的文本块。底部（页脚）应该有1个相同的文本块。有没有一个干净的方法来做到这一点，而不是把它塞进桌子？这就是我到目前为止所做的事情以及我说它的丑陋：

＆＃13;

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
    <header>
        <span class="HeaderTitle">My header info</span>
    </header>
    <nav>
	<!-- the menu is working fine -->
    </nav>
    <main>
        <style>
        .MyArticle
        {
            width: 30%; 
            display: inline-block;
            float: left;
            margin: 8px;
        }
        </style>
	<div class="jumbotron">
	    <img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left">
	    <p class="lead">Some text</p>
	</div>
	<br/>

	<section id="MiddleSection">
	    <span class="MyArticle">
        	<h2>Current News</h2>
	        <p>Some text</p>
	    </span>
	    <span class="MyArticle">
        	<h2>Something</h2>
	        <p>Some text</p>
	    </span>
	    <span class="MyArticle">
        	<h2>Something</h2>
	        <p>Some text</p>
	    </span>
	</section>
    </main>

    <footer>
        <div>
            <br />
            <hr />
            <p>&copy; 2016 - Steve Gaines</p>
        </div>
    </footer>
</body>
</html>

＆＃13;

Answer 1

这是一种方式。基本上你只需要清理浮子。以下是关于CSS Floats的一些阅读：

* {
    box-sizing: border-box;
}
.jumbotron img {
    border: solid 1px black;
    margin-right: 14px;
}
#MiddleSection {
    clear: left;
    margin: 0px auto;
}
.MyArticle {
    width: 33%;
    display: inline-block;
    text-align: center;
    background: grey;
}
footer {
    clear: left;
    text-align: center;
}

<header>
    <span class="HeaderTitle">My header info</span>
</header>
<main>
    <div class="jumbotron">
        <img src="/Images/Photo.jpg" height="180px" align="left">
        <p class="lead">Some text</p>
    </div>
    <br/>
    <section id="MiddleSection">
        <span class="MyArticle">
        	<h2>Current News</h2>
	        <p>Some text</p>
	    </span>
        <span class="MyArticle">
        	<h2>Something</h2>
	        <p>Some text</p>
	    </span>
        <span class="MyArticle">
        	<h2>Something</h2>
	        <p>Some text</p>
	    </span>
    </section>
</main>
<footer>
    <div>
        <br />
        <hr />
        <p>&copy; 2016 - Steve Gaines</p>
    </div>
</footer>

虽然大多数人通常不会在其网站上制作全宽内容（将代码段扩展为全屏以查看我的意思）。

对于现代浏览器来说，更好/更简单的另一种方法是使用Flexbox方法（如果您必须支持IE8或IE9等，则不是真正的选项）。

如何在不使用表

1 个答案: