中心div在剩余的行空间中

Question

我正在努力找出使用CSS的最佳方法，让Block 2保持在Block 1右侧存在的剩余空间中。这个空间可能会随着浏览器窗口的大小/设备的方向而增加或减少。 Block1的位置不动。

我希望能够使用float，margin-left：auto和margin-right：auto的组合作为保持Block2居中的方式，但遗憾的是我的CSS仍处于初期阶段。

非常感谢任何指导/帮助。

#block1 {
    position:relative;
    top:10px;
    left:0px;
    width:50px;
    height:100px;
    background-color:#009;
}

#block2 {
    position:relative;
    width:100px;
    height:100px;
    top:10px;
    float:right;
    margin-left:auto;
    margin-right:auto;
    background-color:#999;
}

<div id="block1"></div>
<div id="block2"></div>

http://jsfiddle.net/d4agp0h6/

提前致谢

Answer 1

更简单的方法是使用嵌套的divs，而不是尝试在同一个块元素中定位两个。

这是updated jsFiddle

因此，您创建了一个包装器（#block1），它是整个页面的大小，因此您可以在内部移动内容。将每个后续内容放置在此区域内，以便设置边距，位置等。

<强> HTML

<div id="block1">
    <div id="block2">
        <div id="content">
            <p>This is some text</p>
        </div>
    </div>
</div>

然后，使用您的CSS，相对于彼此设置位置，这样您就可以使用边距和百分比间距来保持流畅。

<强> CSS

#block1 {
    position:relative;
    top:10px;
    left:0px;
    width:200px;
    height:400px;
    background:#555;
}

#block2 {
    position:relative;
    width:75%;
    height:100%;
    float:right;
    margin:0 auto;
    background-color:#999;
}

#content {
    margin:0 auto;
    border:1px solid black;
    position:relative;
    top:45%;
}

#content p {
    text-align:center;
}

Answer 2

选项1

这是将Block并排放置的正确方法之一...其中一个Block位于左上方...而另一个Block是Top Center

工作演示1： http://jsfiddle.net/wjtnddy5/

<强> HTML

<div id="mainBlock">
    <div id="block1">
        <div class="box"></div>
    </div>
    <div id="block2">
        <div class="box"></div>
    </div>
</div>

<强> CSS：

html, body {
    height:100%;
    margin:0;
    padding:0;
}
#mainBlock {
     height:98%;
    width:98.9%;
    border:5px solid #000;
}
#block1 {
    width:10%;
    height:100px;
    display:inline-block;
    border:1px solid #ff0000;
    overflow:hidden;
}
#block2 {
    width:89.2%;
    height:100px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid #ff0000;
    display:inline-block;
}
.box {
    margin:0 auto;
    background-color:#009;
    width:100px;
    height:100px;
}

使用“ display:inline-block; ”将Block并排放置，这比使用 Float 技术更好......让我知道因为你只需要Float！

选项2

这是使用“ float：left ”的其他技术，如果你只需要这个......

对于这个我刚用两个块替换“display：inline-block”和“float：left”....其余是相同的..

工作演示2：http://jsfiddle.net/h78poh52/

希望这会有所帮助!!!

Answer 3

以下是我对解决方案的看法。我使用Brian Bennett小提琴作为基础，因为我同意他如何布置标记并且自己会做类似的事情。

Link to JSFiddle

我不同的地方是添加一个容器部分：

<section id='container'>
    <div id="block1"></div>
    <div id="block2">
       <div id="content">
          <p>This is some text</p>
       </div>
    </div>
</section>

我还使用百分比来确定宽度而不是px值 - #container除外。更改容器的宽度应表明相关内容始终居中。

Answer 4

看起来你想要一个固定的侧栏和一个流体内容区域。

DEMO：http://jsfiddle.net/fem4uf6c/1/

CSS：

body, html {padding:0;margin:0;}

#side {
    width: 50px;
    background-color: red;
    box-sizing: border-box;
    float: left;
    height: 500px;
    position: relative;
    z-index: 1;
}
.content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 20px 20px 70px;
    text-align: center;
}
#box2 {
    width: 50%;
    height: 300px;
    background: purple;
    margin: 0 auto;
}

HTML：

<div id="side"></div>
<div class="content">

    <p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>

<div id="box2"></div>


</div>