0
Я могу заставить этот макет со столом, но я считаю, что лучшей практикой могут быть некоторые настройки отображения/поплавка в CSS. У меня есть заголовок и раздел меню, которые работают по желанию. Ниже - верхняя, средняя и нижняя части, которые обертывают уродливо. Верхняя часть должна иметь изображение, за которым следует блок текста. Средняя часть должна иметь 3 одинаковых блока текста. Нижний (нижний колонтитул) должен иметь 1 равный блок текста. Есть ли чистый способ сделать это, не набирая его в стол? Вот то, что я делал до сих пор, и, как я говорю, что это некрасиво:Как выложить мои разделы без использования таблицы
<!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>
Можете ли вы изложить, как он должен выглядеть? Или предоставить табличную версию для сравнения? Для начала блок 'style' должен находиться внутри' head', и лучше сказать '