Question

我需要将第一个块的内容浮动到左侧，将右侧块的内容浮动到右侧：

＆＃13;

var list= SettingsManager.ReadSettings<Setting>();
// continue here

＆＃13;

我需要得到这个：

<div>
  <div>A</div>
  <div>B</div>
</div>

但现在我明白了：

    _______________
    A_____________B

Answer 1

使用flexbox

.container {
  display: flex;
  justify-content: space-between;
  width: 25%;
  border-top: thin solid darkgray;
  border-bottom: thin solid darkgray;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>

Answer 2

您可以使用bootstrap grid或此自定义代码

<style>
    .div_lg {
        overflow: hidden;
    }
    .div_md {
        width: 50%;
        float: left;
    }
</style>
<div class="div_lg">
    <div class="div_md">A</div>
    <div class="div_md">B</div>
</div>

See Demo on jsfiddle

Answer 3

试试这个：

<div class="parent">
    <div>A</div>
    <div>B</div>
</div>

.parent {
  display:flex;
  width: 250px;
  border: 1px solid
}

.parent div:first-of-type {
 width: 50%;
}

.parent div:last-of-type {
  width: 50%;
 float:right;
 display:block;
 text-align: right;
}

这里是演示：https://jsfiddle.net/osvdpr1y/

希望它会对你有所帮助:)。

Answer 4

为div display: inline-block添加一个css属性。请参阅以下代码。

＆＃13;

<style>
  .a{
     width: 200px;
     background: red;
    }
  .b{
     width: 200px;
     background: blue;
    }
  .a, .b {
    display: inline-block;
    text-align: center;
   }
</style>

<!--HTML-->
<div>
   <div class="a">A</div>
   <div class="b">B</div>
</div>

＆＃13;

Answer 5

您可以将它们对齐在同一条线上。

<div class="sameLine">
  <div>A</div>
  <div>B</div>
</div>

.sameLine div {
    display: inline;
}

Answer 6

＆＃13;

<div>
  <div style="float:left;display:block;max-width:50%;border:1px solid red;">Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div style="float:right;display:block;max-width:50%; border:1px solid red;">Bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

＆＃13;

Answer 7

我已经通过自己的简单解决方案解决了：

CSS：

.parent { display: table; width: 100%;}
.children { display: table-cell; vertical-align: middle;}

HTML：

<div class="parent">
   <div class="children"></div>
   <div class="children"></div>
</div>

如何在中间设置同一行的两个块？

7 个答案: