Question

我的页面顶部看起来像这样（顶部的蓝色位是书签栏的底部）：

我有一个包装器div，包含两个imgs（左，右）和一个div。我希望这三件事都能拥抱在页面顶部并排成一行。我认为添加display: inline会这样做，但那不起作用。现在我很难过。

CSS：

body {
  margin:0px;
  padding:0px;
}

#main{
  display: inline;
}

p {
  font-family:"Open Sans",sans-serif;
  font-size: 14px;
}

#img1{
  float:left;
}

#img2{
  float:right;
}

.design-img {
  /*border:1px red;*/
  display: inline;
  top:0px;
}

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8"> </meta>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript" src="js/libs/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="js/libs/raphael.min.js"></script>
  </head>

  <body>
    <div id='container'>
      <img src='go.jpg'/ id='img1' class='design-img'>
      <div id='main'>
        <h1>Table of Contents</h1>
        <p></p>
      </div>
      <img src='go.jpg'/ id='img2' class='design-img'>
    </div>


    <script type="text/javascript" src="js/script.js"></script>
  </body>
</html>

Answer 1

把这个css可能对你有帮助..

#img1{  width:30%; float:left;}
#img2{ width:30%; float:right;}
h1{ margin:0; width:40%;float:left;}

Answer 2

#main {
    display: inline-block;
}

这应该可以解决问题。

查看inline和inline-block

之间的差异

Answer 3

问题是你在源中的主div之后有＃img2，这意味着它比第一张图像更低。将它浮动到右边不会让它向上移动到页面上！

一种解决方案是将<img>移到顶部，靠近第一个<img>，以便主要的div出现。

＆＃13;

body {
  margin: 0px;
  padding: 0px;
}
#main {
  display: inline;
}
p {
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
}
#img1 {
  float: left;
}
#img2 {
  float: right;
}
.design-img {
  /*border:1px red;*/
  display: inline;
  top: 0px;
}

＆＃13;

<div id='container'>
  <img src='https://placehold.it/150x150' id='img2' class='design-img'>
  <img src='https://placehold.it/150x150' id='img1' class='design-img'>
  <div id='main'>
    <h1>Table of Contents</h1>
    <p></p>
  </div>
</div>

＆＃13;

没有改变css。

顺便说一下，您的来源有错误：/标记中有一个迷路<img>。在某些情况下，这可能会导致纠错例程认为这是<img>标记的结尾。所以删除它们。

为什么这些图片不会与页面顶部对齐？

3 个答案: