我已经绞尽脑汁待了3个半小时试图做2个看似简单的任务。第一个任务是填充段div的外部，另一个是将主要部分拆分为两列，这样我就可以添加一些链接到网站的其他部分。如果你知道我可以做些什么来解决我的困境，下面是我的代码，请在下面发表评论。
谢谢。
html {
font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif";
font-size: 120%;
}
header {
background-color: #6699cc;
margin: auto;
background: no-repeat center center cover;
display: block;
position: relative;
width: 60%;
height: 114px;
border: 0px;
overflow: hidden;
}
nav {
background-color: none;
border: 1px;
border-color: black;
display: inline-block;
padding: 0;
position: absolute;
bottom: 0;
right: 50px;
}
#header-left {
width: 50%;
display: flex;
align-items: flex-end;
height: 100%;
position: absolute;
bottom: 5px;
left: 55px;
z-index: 2;
}
#header-right {
width: 50%;
display: flex;
align-items: flex-end;
height: 100%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: none;
}
nav li {
float: left;
border-left: 1px solid #555;
}
li a {
display: block;
color: #fff;
padding: 8px 10px;
text-decoration: none;
}
nav li a:hover {
background-color: #555;
color: white;
}
#wrapper {
width: 100%;
overflow: hidden;
}
#container {
width: 100%;
margin: 0 auto;
overflow: hidden;
align: bottom;
}
#banner-img {
width: 100%;
opacity: 0.5;
}
body {
margin: 0;
}
main h1, h6 {
margin: 0 0 0 37.3%;
padding-left: 20px;
text-align: left;
font-weight: normal;
background-color: #6699cc;
}
main h6 {
padding-bottom: 10px;
color: #fff;
border-bottom: medium solid #555555;
}
main {
background-color: #fff;
margin: 20px auto;
width: 60%;
}
.TextWrap {
float: left;
margin: 20px;
text-align: justify;
}
h1.featured { color: #FFFFFF}
span.article { color: #444}
footer {
background-color: #555;
color: #000000;
text-align: center;
width: 60%;
margin: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf 8">
<link rel="stylesheet" href="techworldtoday.css" />
</head>
<header>
<div id="banner">
<div id="wrapper">
<div id="container">
<a HREF="http://www.techworldtoday.net"><img class="banner-img" src="images/logobackground1.png" alt="Tech News Today"/></a>
</div>
</div>
</div>
<div id="header-left">
<img src="images/logo.png" alt="Tech World Today" align="bottom"/>
</div>
<div id="header-right">
<nav>
<ul>
<li><a href="index.html" id="page1">Home</a></li>
<li><a href="news.html" id="page2">News</a></li>
<li><a href="benchmarks.html" id="page3">Benchmarks</a></li>
<li><a href="tutorials.html" id="page4">Tutorial</a></li>
<li><a href="tutorials.html" id="page5">Contact Us</a></li>
<li><a href="tutorials.html" id="page6">About Us</a></li>
</ul>
</nav>
</div>
</header>
<body background="images/techbackground.png" bgcolor="#333">
</body>
<main>
<div id="paragraph">
<img class="element" src="images/cybermonday.png" alt="Cyber Monday" height="290" width="400" />
<h1 class="featured">Cyber Monday <span class="article">2016</span></h1>
<h6>By Gregory Shepherd</h6>
<p>Technology companies broke records during this holidays “Cyber Monday” shopping event with almost 3.5 billion dollars spent worldwide. This beat sales for the previous year by over 12%. Analysts show a massive swing toward online sales and even claim that Black Friday 2017 could be the top online shopping day of the year. After making deals available earlier this year, companies have shown that starting Cyber Monday with deals early wouldn’t hurt sales. If this trend continues we may see deals spring up as early as the first of November 2017.</p>
<p>This year’s record breaking sales were due companies offering more products online for pick up than were available in previous years. Target collaborated with the Curbside app to allow customer to purchase items from their mobile devices and pick the items up in store. Amazon saw a notable boost in shares over the holiday weekend whereas retail stores saw a small dip. This trend shows that mobile shopping will have a larger part in these sales events in the future.</p>
<p>Online only stores such as Newegg, Tiger-direct, and NCIX got in on the holiday action as well. Newegg, which boasted a Black November event, had deals lined up all month. Collaborating with other companies allowed Newegg to offer the best deals in tech on the internet to-date. NCIX utilized the popular video platform, YouTube, to reach hundreds of thousands of customers in one of the cheapest and most successful marketing pushes in US history. Don’t forget to leave a comment below.</p>
<style>
.element{
shape-outside: url(images/cybermonday.png);
shape-image-threshold: 0.5;
float: left;
margin: 10px;
}
</style>
</div>
</main>
<footer>
<text>Contact Us:</text><br>
<a href="mailto: gshepherd252@gmail.com">E-mail</a>
</footer>
</html>
答案 0 :(得分：0)
一些事情......
除非您出于某种原因需要段落ID，否则我建议将其更改为类，以便可以重复使用。
然后，要在段落类中添加填充，您可以执行以下操作：
.paragraph {
padding: 50px;
}
要创建两列，您需要做一些事情。我建议将每列的内容包装在一个新的div中，使用col-50类（因为你希望每个列占据容器的50％）。像这样......
<main>
<div class="col-50">
<div class="paragraph">
..contents here
</div>
</div>
<div class="col-50">
<div class="paragraph">
..contents here
</div>
</div>
</main>
您需要为新列和主容器添加一些规则。
.col-50 {
width: 50%;
float: left;
}
main:after {
content: " ";
display: block;
height: 0;
clear: both;
}
和页脚也是..
footer {
clear: both
}
如果列没有并排显示，您可以减小它们的宽度，因为填充可以影响这一点（查看框大小规则）
您可以在此处查看内容的简化演示：http://codepen.io/sol_b/pen/rWJyEm
请注意，我还将.element的样式移到了css。