0
Ich kann dieses Layout mit einer Tabelle erzwingen, aber ich denke, dass einige Anzeige-/Gleitkommaeinstellungen in CSS die beste Vorgehensweise darstellen. Ich habe eine Kopfzeile und einen Menüabschnitt, die wie gewünscht funktionieren. Unter ihnen sind obere, mittlere und untere Abschnitte, die hässlich sind. Der obere Abschnitt sollte ein Bild gefolgt von einem Textblock haben. Der mittlere Abschnitt sollte 3 gleiche Textblöcke haben. Die untere (Fußzeile) sollte 1 gleichen Textblock haben. Gibt es einen sauberen Weg, dies zu tun, ohne es in einen Tisch zu stopfen? Hier ist, was ich bisher zu tun und wie ich sagen, es ist hässlich:So legen Sie meine Abschnitte an, ohne eine Tabelle zu verwenden
<!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>
\t <!-- the menu is working fine -->
</nav>
<main>
<style>
.MyArticle
{
width: 30%;
display: inline-block;
float: left;
margin: 8px;
}
</style>
\t <div class="jumbotron">
\t <img src="/Images/Photo.jpg" style="border:solid 1px black; margin-right: 14px;" height="180px" align="left">
\t <p class="lead">Some text</p>
\t </div>
\t <br/>
\t <section id="MiddleSection">
\t <span class="MyArticle">
\t <h2>Current News</h2>
\t <p>Some text</p>
\t </span>
\t <span class="MyArticle">
\t <h2>Something</h2>
\t <p>Some text</p>
\t </span>
\t <span class="MyArticle">
\t <h2>Something</h2>
\t <p>Some text</p>
\t </span>
\t </section>
</main>
<footer>
<div>
<br />
<hr />
<p>© 2016 - Steve Gaines</p>
</div>
</footer>
</body>
</html>
Können Sie herausziehen, wie es aussehen soll? Oder bieten Sie die Tischversion an, damit wir sie vergleichen können? Zu Beginn sollte der 'style' Block in' head' sein, und es ist am besten zu sagen: