Question

这是一个包含两列的简单框：

HTML：

<div id="wrapper">
  <div class="left">
    <div class="image-title">Image title
    </div>
    <img src="http://placehold.it/100x100">
  </div><!-- left -->
  <div class="right">
    <div class="title">
     <h2>Title here</h2>
    </div><!-- title -->
    <div class="content">
     <p>Content here.</p>
     <p>Content here.</p>
    </div><!-- content -->
  </div><!-- right -->
</div><!-- wrapper -->

CSS：

#wrapper {
    overflow: auto;
    width: 100%;
    border: 1px solid red;
    padding: 1px;
}
.left {
    display: inline-block;
    float: left;
    width: 30%;
    border: 1px solid grey;
   text-align: center;
}
.right {
    display: inline-block;
    width: 70%;
    border: 1px solid grey;
}

Demo

我希望右侧div应该放在右侧，但是它放在左侧div元素下面。我怎么能完成它？

感谢您的帮助。

Answer 1

您可以使用box-sizing: border-box;完美对齐它。无需使用align:right;或调整宽度。

#wrapper {
    overflow: auto;
    width: 100%;
    border: 1px solid red;
    padding: 1px;
}
.left {
    display: inline-block;
    float: left;
    width: 30%;
    border: 1px solid grey;
    text-align: center;
    box-sizing: border-box;
}
.right {
    display: inline-block;
    width: 70%;
    border: 1px solid grey;
    box-sizing: border-box;
}

<div id="wrapper">
  <div class="left">
    <div class="image-title">Image title
    </div>
    <img src="http://placehold.it/100x100">
  </div><!-- left -->
  <div class="right">
    <div class="title">
     <h2>Title here</h2>
    </div><!-- title -->
    <div class="content">
     <p>Content here.</p>
     <p>Content here.</p>
    </div><!-- content -->
  </div><!-- right -->
</div><!-- wrapper -->

Answer 2

这很容易做到。只需使用float：right;

.right {
   display: inline-block;
   width: 70%;
   border: 1px solid grey;
   float: right;

}

Answer 3

不确定你想要什么。但是如果你想让.right div在右侧，你需要申请

float:right

See the demo here

此外，您在框外还有1px的边框。它需要在里面你可以使用box-shadow。

-webkit-box-shadow:inset 0px 0px 0px 1px gray;
-moz-box-shadow:inset 0px 0px 0px 1px gray;
box-shadow:inset 0px 0px 0px 1px gray;

See the demo here

更新：你的div上没有高度，所以你的文字正在建立高度。只需涂抹一个高度。

.left {
    height:130px;

.right {
    height:130px;

See the example here。

Answer 4

这里的第一个问题是你将3px添加为边框。当您测量宽度时，这些不会计入％，这使得内部div太宽而无法放在一条线上。如果您将以下行添加到right div，您将看到我的意思：

.right {
    display: inline-block;
    width: 70%;
    border: 1px solid grey;
    float: right;
}

现在我们已经解决了第二个问题; div现在会按预期向右浮动，但你可以看到盒子正在切割彼此的边缘。现在有一个很好的诀窍来解决这个问题，那就是box-sizing: border-box;，它会自动将边框与div的边缘匹配，而不是像标准那样在其外部。

#wrapper {
    overflow: auto;
    width: 100%;
    border: 1px solid red;
    padding: 1px;
}
.left {
    display: inline-block;
    float: left;
    width: 30%;
    border: 1px solid grey;
   text-align: center;
    box-sizing: border-box;
}
.right {
    display: inline-block;
    width: 70%;
    border: 1px solid grey;
    float: right;
    box-sizing: border-box;
}

<div id="wrapper">
  <div class="left">
    <div class="image-title">Image title
    </div>
    <img src="http://placehold.it/100x100">
  </div><!-- left -->
  <div class="right">
    <div class="title">
     <h2>Title here</h2>
    </div><!-- title -->
    <div class="content">
     <p>Content here.</p>
     <p>Content here.</p>
    </div><!-- content -->
  </div><!-- right -->
</div><!-- wrapper -->

Answer 5

要向右侧的right div，您需要将float:right添加到css：

.right {
    display: inline-block;
    width: 70%;
    float:right;
    border: 1px solid grey;
}

DEMO

Answer 6

最小化的css文件可能如下所示。

#wrapper {
    overflow: auto;
    width: 100%;
    border: 1px solid red;
    padding: 1px;
}
.left, .right {
    height:130px;
    display: inline-block;
/* choose your border method
    border: 1px solid grey;
Or
    -webkit-box-shadow:inset 0px 0px 0px 1px gray;
    -moz-box-shadow:inset 0px 0px 0px 1px gray;
    box-shadow:inset 0px 0px 0px 1px gray;
*/
}
.left {
    float: left;
    width: 30%;
    text-align: center;
}
.right {
    float: right;
    width: 70%;
}

如何使用css将右侧div移动到右侧

6 个答案: