如何将现有网页的各个部分包装在 3 个彼此相邻的 div 中

Question

我已经制作了一个网页，所以元素已经存在并就位。 正如您在示例中所看到的，页面的主要部分具有非常独特的 结构：
左 - 菜单圆圈
中间 - 文字
右 - 图片

我想制作 3 个单独的div，一个用于圆圈的div，一个用于文本的div 和一个用于图片的div。有没有办法在不实际改变网站外观的情况下做到这一点。

这样其他人以后可以更轻松地编辑网页。

https://plnkr.co/edit/YhS1I3nfW3UCqUIK2p8o?p=preview

.smallmenu {
margin: 0 auto;
max-width: 436px;
width: 100%;
}
.circlemenu {
display: inline-block;
margin: auto;
width: 106px height: 107;
margin-bottom: 18px;
border: solid 2px #73B7DB;
background: #73B7DB;
width: 100px;
height: 100px;
border-radius: 100px;
text-align: center;
line-height: 440%;
font-size: 22px;
text-decoration: none;
}
.circle {
border: solid 2px #73B7DB;
background: #73B7DB;
width: 100px;
height: 100px;
border-radius: 100px;
text-align: center;
line-height: 440%;
font-size: 22px;
text-decoration: none;
}
.paragraphs {
margin: 7% 40% 2% 15%
}
.imageleft {
float: left;
margin: 00% 10% 10% -20%;
}
.imageright {
float: right;
margin: -5% -80% 10% 10%;
width: 300px;
height: 174px
}
#hovermenu:hover {
border: solid 2px #464646;
background: #464646;
width: 100px;
height: 100px;
border-radius: 100px;
text-align: center;
line-height: 440%;
font-size: 22px;
text-decoration: none;
}
.quizbox {
width: 70%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#answer1,
#answer2,
#answer3,
#answer4,
#answer5,
#answer6,
#answer7,
#answer8,
#answer9,
#answer10,
#answer11,
#answer12,
#answer13,
#answer14,
#answer15,
#answer16 {
display: inline;
color: green;
margin-right: 30%;
float: right;
width: 50%;
}
input[type="submit"] {
padding: 10px 15px 11px !important;
font-size: 18px !important;
background-color: #00995D;
font-weight: bold;
color: white;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #57D6C7;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

<p style="text-align: center;"><span style="font-size: 24pt;">Mit dem Fahrrad zur Schule? Aber sicher!</span></p>
<p style="margin: 2% 20% 2% 20%;">Es gibt viele gute Gründe, mit dem Fahrrad zur Schule zu fahren. Lerne sie kennen und plane deine persönliche, sicherste Route.</p>
&nbsp;
<div class="smallmenu">
<a class="circlemenu" href="#why" id="hovermenu">
<font color="white">Warum</font>
</a>
<a class="circlemenu" href="#what" id="hovermenu">
<font color="white">Was</font>
</a>
<a class="circlemenu" href="#how" id="hovermenu">
<font color="white">Wie</font>
</a>
<a class="circlemenu" href="#quiz" id="hovermenu">
<font color="white">Quiz</font>
</a>
</div>
&nbsp;
<hr width="100%" />
<div class="paragraphs">
<a class="imageleft circle" id="why">
<font color="white">Warum</font>
</a><img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" />Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum.
</div>

Answer 1

flex属性就是为此目的而创建的：

.main {
display : flex;
justify-content : space-around;
background-color : black;
}
.main .sub {
width : 100px;
height : 100px;
background-color : red;
}

<div class="main">
<div class="sub"><p>First div</p></div>
<div class="sub"><p>Second div</p></div>
<div class="sub"><p>Third div</p></div>
</div>

您可以使用空格更改对齐内容的值，这取决于您的口味。