Question

我的页面末尾有两个div我希望将第二个div放在页面的第一个和最后一个之间。像这样：

|   |          | |    | | 
|   |          | |    | |
|   |   div1   | |div2| |
|   |          | |    | |
|   |          | |    | |

“Div 2”应该位于“div 1”和页面末尾之间。我尝试了我所知道的一切，没有任何效果。

我的HTML：

    <!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="teste.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="teste.js"></script>

    <title>Example</title>
</head>

<body>

    <div id="header">
        <div class="title"">Example</div>
    </div>

    <div id="main-body">
        <ul class="nav-tabs">
            <li class="active-tab"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
        </ul>

    </div>

    <div id="right-menu"></div>

    <footer>
    </footer>

</body>

</html>

我的CSS：

/* Fonte Nunito a ser usada no título */
@import url(http://fonts.googleapis.com/css?family=Nunito);

/*----------------------------------------------*/

/* Cor do fundo da página */
body {
    background-color: #cccccc;
}

/*----------------------------------------------*/

/* Header */

/* Cor e tamanho */
#header {
    background-color: #669966;
    background-size: cover;
    height: 100px;
    width: 100%;
    clear: both;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Título */
#header .title {
    color: #cccccc;
    font-family: Nunito;
    font-size: 50px;
        font-style: italic;
        line-height: 46px;
    left: 60px;
        top: 30px;
    position: absolute;
}

/*----------------------------------------------*/

/* Tabs */
.nav-tabs {
    background-color: #cccccc;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

/* Tab cells */
.nav-tabs li {
    background-color: gray;
    color: white;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;

}

/* Tab ativa */
.active-tab {
    background-color: white;
    color: red;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

/*----------------------------------------------*/

/* Main body (this is "div 1")*/

#main-body {
    background-color: white;
    height: 100vh;
    width: 900px;
    margin: 5px 0 5px 100px;
    display: inline-block;
}

/*----------------------------------------------*/

/* Menu à direita(this is "div 2") */

#right-menu {
    border: 2px solid red;
    background-color: yellow;
    height: 30px;
    width: 50px;
    display: inline-block;
}

/*----------------------------------------------*/

/* Footah */

footer {
    background-color: #333333;
    height: 200px;
    width: 100%;
    margin: 0;
    padding: 0;
}

有人可以帮忙吗？

[编辑] 感谢发布解决方案的所有人。问题解决了！

6 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

答案 2 :(得分：0)

答案 3 :(得分：0)

答案 4 :(得分：0)

答案 5 :(得分：-1)

Answer 1

你越来越近了。

你需要制作两个外部div，它们将一起保持页面的整个宽度（一个用于主列，例如70％宽，一个用于右列，宽度为30％）。然后在右列内，放置另一个固定宽度的div，并在外部div上使用text-align：center。

Answer 2

首先将#right-menu 放在 #main-body之前：

<div id="right-menu"></div>

<div id="main-body">
        <ul class="nav-tabs">

设置/修改这些CSS规则

#main-body {
    margin:0 auto;
    display:block;
}

#right-menu {
    position: absolute;
    right: calc(((100% - 900px) / 4) - 25px);
}

right:计算的工作方式如下：从整页宽度（100％）中删除主宽度（900px）;这给了我们两边（左边和右边）的剩余宽度，所以我们将它除以两边，然后将一边的宽度再分为两边，得到一边的一半尺寸。这将为我们提供左侧或右侧自由空间的确切位置中心（您可以将right:属性更改为left:，这样您就可以将其置于左侧。最后将元素本身居中我们减去右边菜单宽度的一半（50px / 2 = 25px）。

Answer 3

如果我理解正确，请尝试这个小提琴https://jsfiddle.net/9jrLat77/

CSS应该是这样的

/* Fonte Nunito a ser usada no título */
@import url(http://fonts.googleapis.com/css?family=Nunito);

/*----------------------------------------------*/

/* Cor do fundo da página */
body {
    background-color: #cccccc;
}

/*----------------------------------------------*/

/* Header */

/* Cor e tamanho */
#header {
    background-color: #669966;
    background-size: cover;
    height: 100px;
    width: 100%;
    clear: both;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Título */
#header .title {
    color: #cccccc;
    font-family: Nunito;
    font-size: 50px;
        font-style: italic;
        line-height: 46px;
    left: 60px;
        top: 30px;
    position: absolute;
}

/*----------------------------------------------*/

/* Tabs */
.nav-tabs {
    background-color: #cccccc;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

/* Tab cells */
.nav-tabs li {
    background-color: gray;
    color: white;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;

}

/* Tab ativa */
.active-tab {
    background-color: white;
    color: red;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

/*----------------------------------------------*/

/* Main body (this is "div 1")*/

#main-body {
    background-color: white;
    height: 100vh;
    width: 900px;
    margin: 5px 0;
    display: inline-block;
    float:left;
}

/*----------------------------------------------*/

/* Menu à direita(this is "div 2") */

#right-menu {
    border: 2px solid red;
    background-color: yellow;
    height: 30px;
    margin: 5px 0;
    width: calc(100% - 920px);
    display: block;
    float:right;
}


.content-wrapper {
    width: 100%;
}
}

Answer 4

你应该尝试使用bootstrap。它的框架使您可以更轻松地格式化页面。您可以通过在代码中包含以下行来进行设置：

Bootstraps“container”的宽度为12.因此，如果您设置宽度为5且第二个div宽度为3的第一个div，则可以将其设置为：

<div id="container">
<div id="row">
<div id="col-md-5">div 1 </div>
<div id="col-md-3 col-md-offset-2"> div 2 </div>
</div> </div>

md部分代表中等，可以是你想要的任何尺寸（xs，sm，md，lg）偏移是由于您有12个宽度，因此如果宽度为5和3，则必须将其移动到2以使其居中。

Answer 5

使用此：

<style type="text/css">
 body {
  margin: 0px;
  padding: 0px;
 }

 #right {
  background-color: #ff0000;
  float: right;
  height: 500px;
  margin: 0px;
  padding: 0px;
  width: 300px;
 }

 #main {
  background-color: #0000ff;
  height: 500px;
  margin: 0px;
  padding: 0px;
  width: 900px;
 }
</style>
<div id="right"></div>
<div id="main"></div>
<script type="text/javascript">
 window.onload = setMargin;
 window.onresize = setMargin;

 function setMargin() {
  var x = window.innerWidth;
  var y = x - 900 - 300;
  var z = y / 2;

  document.getElementById("right").style.marginRight = z;
 }
</script>

Answer 6

我觉得这里最简单的方法是在右侧有一个占用剩余宽度的浪花div ...然后将菜单块置于其中。

为了简单起见，我在这里使用了浮点数（而不是内联块），因为空格会影响jQuery('.voteapproveform').submit(ajaxSubmit_voteapproveform); function ajaxSubmit_voteapproveform(){ var voteapproveform = jQuery(this).serialize(); jQuery(this).parent().fadeOut(); // hide approve and reject button to prevent further voting jQuery.ajax({ type:"POST", url: SiteParameters.site_url+"/wp-admin/admin-ajax.php", data: voteapproveform, context: this, success:function(data){ jQuery(this).fadeOut(); // hide approve box on submit jQuery(this).parent().next().html(data); // empty div .modboxfeedback to show returned data } }); return false; }值，除非你重置它们。

＆＃13;

calc

＆＃13;

* {
  box-sizing: border-box;
}
/* Main body (this is "div 1")*/

#main-body {
  background-color: lightgrey;
  height: 100vh;
  width: 900px;
  margin-left: 100px;
  margin-right: 5px;
  float: left;
}
/*----------------------------------------------*/

/* Menu à direita(this is "div 2") */

#right-wrap {
  background: #bada55;
  width: calc(100% - 1005px);
  float: left;
  text-align: center;
}
#right-menu {
  border: 2px solid red;
  background-color: yellow;
  height: 30px;
  width: 50px;
  display: inline-block;
}

＆＃13;

Codepen Demo

居中div的问题

6 个答案: