如何让我的2个div与中间的div对齐？

时间：2016-12-07 19:42:51

标签： html css

在此屏幕截图中，您可以看到底部的2个div不会向上，但如果我删除其中一个，则另一个上升。如果有人能够帮助我，请解释你是如何做到的。我现在已经挣扎了一段时间。

enter image description here

＆＃13;
＆＃13; 
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
 body {
  font-family: 'Roboto', sans-serif;
  background: #36536B;
}
header {
  background: url(http://images.akamai.steamusercontent.com/ugc/429358847309389564/B2112B09FD47EAAD9D4DC304C26CE583794A5844/);
  width: 770px;
  height: 140px;
  padding: 5px;
  background-color: #ffffff;
  border: 1px solid #c2c2c2
}
.container {
  max-width: 770px;
  margin: auto;
  margin-top: 15px;
  overflow: hidden;
}
.left,
.right,
.middle {
  float: left;
  overflow: hidden;
  border-radius: 3px;
  margin-right: 10px;
  position: initial;
}
.wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 1060px;
}
.right {
  margin-right: 0px;
  float: right;
  position: initial;
}
.left-header,
.right-header,
.middle-header {
  background: #58C5B3;
  font-size: 10px;
  padding: 15px;
  color: #FFFFFF;
  text-transform: uppercase;
  position: initial;
}
.middle {
  width: 498px;
  position: initial;
}
.left-text,
.right-text,
.middle-text {
  background: #FFFFFF;
  padding: 5px;
  font-size: 15px;
  position: initial;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #55A7DB;
  color: black;
  line-height: 22px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  vertical-align: middle;
  border-radius: .2em;
  width: 780px;
  height: 42px;
  border-right: .2em;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 010px 16px;
  text-decoration: none;
  font-size: 10px;
}
li a:hover {
  background-color: #58c5b3;
  margin: 0;
  color: #fff;
}
a:link {
  color: white;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}
a:hover {
  color: #ffffff;
}
a:visited {
  color: white;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
}
.design {
  padding: 3px;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  background-color: #ffffff;
  border: 1px solid #c2c2c2;
  border-radius: 5px;
  position: relative;
}
.pluss {
  color: #7dc3b7;
}
.minus {
  color: #c5618b;
}
.space {
  height: 20px;
}
input[type=text],
input[type=password] {
  border: 5px solid white;
}
input[type=submit] {
  padding: 10px 10px;
  border-radius: .2em;
  border: 0 none;
  background-color: #f1f2f3;
}
input[type=submit]:hover {
  opacity: 0.5;
}
.smatt {
  font-size: 10px;
}
.avatar {
  border-radius: 50%;
}
＆＃13; 
<div class="wrapper">
  <div class="container">

    <ul>
      <li>
        <a href="#"><i class="fa fa-home" aria-hidden="true"></i>HOME</a>
      </li>
      <li>
        <a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>NEWS</a>
      </li>
      <li>
        <a href="#"><i class="fa fa-users" aria-hidden="true"></i>ADMINS</a>
      </li>
      <li style="float:right">
        <a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i>LOGIN</a>
      </li>
    </ul>

    <br>

    <!-- LEFT  -->
    <div class="left" style="width: 25%">
      <div class="left-header">
        brukerprofil<i style="float:right" class="fa fa-user fa-lg" aria-hidden="true"></i>
      </div>
      <div class="left-text">
        <!-- -->
        ...
      </div>
    </div>
    <!-- /// left-->

    <!-- MIDDLE -->
    <div class="middle" style="width: 47%">
      <div class="middle-header" style="background-color: #ce5b5b">
        Welcome to (servername)!<i style="float:right;" class="fa fa-home fa-lg" aria-hidden="true"></i>
      </div>
      <div class="middle-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <!-- /// middle-->

    <!-- RIGHT -->
    <div class="right" style="width: 25%;">
      <div class="right-header" style="background-color: #e3c155 ">
        logg inn<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
      </div>
      <div class="right-text" style="padding 7px">
        <!-- -->
        <input type="text" name="Brukernavn" placeholder="Brukernavn">
        <br>
        <input type="password" name="Passord:" placeholder="Passord">
        <br>
        <input type="submit" name="login" value="Logg inn">
        <span class="smatt">, eller registrer.</span>
      </div>
    </div>

    <br>

    <p>
      <div class="left" style="width: 25%">
        <div class="left-header" style="background-color: #ce5b5b">
          Welcome to (servername)!<i style="float:right;" class="fa fa-home fa-lg" aria-hidden="true"></i>
        </div>
        <div class="left-text">
          ...
        </div>
      </div>

      <!-- RIGHT -->
      <p>
        <div class="right" style="width: 25%;">
          <div class="right-header" style="background-color: #e3c155 ">
            logg inn<i style="float:right;" class="fa fa-sign-in fa-lg" aria-hidden="true"></i>
          </div>
          <div class="right-text" style="padding 7px, margin-bottom: 10px;">
            <!-- -->
            <input type="text" name="Brukernavn" placeholder="Brukernavn">
            <br>
            <input type="password" name="Passord:" placeholder="Passord">
            <br>
            <input type="submit" name="login" value="Logg inn">
            <span class="smatt">, eller registrer.</span>
          </div>
        </div>

  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我尝试过：

我试图改变余地：div上的0，但只是让它变得更糟。 我也知道中间div的高度决定了2个div的位置，我怎么做才不会发生？

0 个答案:

没有答案
相关问题
最新问题