Question

如何将这两个div分为一个中心和另一个右上角？我可以设法接受他们，但第二个div是＆＃34; top＆＃34;在右边第一个div是＆＃34; kng＆＃34;。我究竟做错了什么？解释会受到欢迎。谢谢

＆＃13;

#smedia {
  margin-left: 30px;
}

#smedia a:link {
  text-decoration: none;
  font-color: black;
}

#header a {
  text-decoration: none;
  color: black;
}

#fb {
  height: 23px;
}

.top {
  float: right;
}

#kng {
  display: table;
  margin: 0 auto;
}

#kng img {
  height: 150px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

＆＃13;

<div id="kng">
  <img src="img/kng.jpg">
</div>
<div class="top">
  <div id="header">
    <a href="#"> Sign in</a> |
    <a href="signup.php"> Sign up </a> |
    <a href="#"> Help </a>
  </div>
  <div id="smedia">
    <a href="https://www.facebook.com"><img src="http://www.ransomesjacobsen.com/themes/jacobsen/images/icons/facebook-icon-small.png" alt="facebook" id="fb"> </a>
    <a href="https://www.twitter.com"> <img src="http://www.freeiconspng.com/_img/icon-top-twitter.png" alt="twitter" id="tw"></a>
    <a href="https://www.instagram.com"> <img src="http://dunedin.art.museum/templates/dpag/images/instagram-icon.png" alt="instagram" id="ins"></a>
  </div>
  <div id="search">
    <input type="text" name="search" placeholder="Search..">
  </div>
</div>

＆＃13;

Answer 1

问题是，您需要以这种方式使用float：

#smedia {
  margin-left: 30px;
}

#smedia a:link {
  text-decoration: none;
  font-color: black;
}

#header a {
  text-decoration: none;
  color: black;
}

#fb {
  height: 23px;
}

.top {
  float: right;
}

#kng {
  display: block;
  text-align: center;
  margin: 0 auto;
}

#kng img {
  height: 150px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

<div class="top">
  <div id="header">
    <a href="#"> Sign in</a> |
    <a href="signup.php"> Sign up </a> |
    <a href="#"> Help </a>
  </div>
  <div id="smedia">
    <a href="https://www.facebook.com"><img src="http://www.ransomesjacobsen.com/themes/jacobsen/images/icons/facebook-icon-small.png" alt="facebook" id="fb"> </a>
    <a href="https://www.twitter.com"> <img src="http://www.freeiconspng.com/_img/icon-top-twitter.png" alt="twitter" id="tw"></a>
    <a href="https://www.instagram.com"> <img src="http://dunedin.art.museum/templates/dpag/images/instagram-icon.png" alt="instagram" id="ins"></a>
  </div>
  <div id="search">
    <input type="text" name="search" placeholder="Search..">
  </div>
</div>
<div id="kng">
  <img src="//placehold.it/150?text=Logo">
</div>

将右浮动元素交换为第一个，然后你去！而display: block代替display: table！

如果您希望图像纯粹居中，可以执行以下操作：

#smedia {
  margin-left: 30px;
}

#smedia a:link {
  text-decoration: none;
  font-color: black;
}

#header a {
  text-decoration: none;
  color: black;
}

#fb {
  height: 23px;
}

.top {
  position: absolute;
  right: 0;
  top: 0;
}

#kng {
  display: block;
  text-align: center;
  margin: 0 auto;
}

#kng img {
  height: 150px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

<div class="top">
  <div id="header">
    <a href="#"> Sign in</a> |
    <a href="signup.php"> Sign up </a> |
    <a href="#"> Help </a>
  </div>
  <div id="smedia">
    <a href="https://www.facebook.com"><img src="http://www.ransomesjacobsen.com/themes/jacobsen/images/icons/facebook-icon-small.png" alt="facebook" id="fb"> </a>
    <a href="https://www.twitter.com"> <img src="http://www.freeiconspng.com/_img/icon-top-twitter.png" alt="twitter" id="tw"></a>
    <a href="https://www.instagram.com"> <img src="http://dunedin.art.museum/templates/dpag/images/instagram-icon.png" alt="instagram" id="ins"></a>
  </div>
  <div id="search">
    <input type="text" name="search" placeholder="Search..">
  </div>
</div>
<div id="kng">
  <img src="//placehold.it/150?text=Logo">
</div>

我怎么能把这两个div分为一个中心和另一个右上角？

1 个答案: