Question

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

我想制作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 属性：

＆＃13;

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

＆＃13;

<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>

＆＃13;

您可以使用空格 - 更改 justify-content 的值，这符合您的口味。

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

1 个答案: