Html 定心div的问题_Html_Css - Fatal编程技术网

Html 定心div的问题

html css

Html 定心div的问题,html,css,Html,Css,我的页面末尾有两个div，我想把第二个div放在第一个和页面末尾之间的中间。大概是这样的： | | | | | | | | | | | | | | div1 | |div2| | | | | | | | | | | | | | <div id="container"> <div id="row"> <div id="col-md-5">

我的页面末尾有两个div，我想把第二个div放在第一个和页面末尾之间的中间。大概是这样的：

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

<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>

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>

有人能帮忙吗

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

你快到了

您需要制作两个外部div，这两个div将一起保持页面的全宽，一个用于主列，宽度为70%，另一个用于右列，宽度为30%。然后在右栏中，放置另一个固定宽度的div，并在外部div上使用文本对齐：居中。

首先将右菜单置于主体之前：

右图：计算如下：从全页宽度100%删除主宽度900px；这给了我们左右两边的剩余宽度，所以我们把它除以2，得到一边的宽度，然后再除以2，得到一边大小的一半。这将为我们提供左侧或右侧自由空间的准确位置中心。您可以将right:属性更改为left:以便将其居中放置在左侧。最后，为了使元素本身居中，我们减去右菜单宽度的一半50px/2=25px。

我觉得最简单的方法是在右边有一个缠绕div，占据剩余的宽度……然后将菜单块居中

为了简单起见，我在这里使用了浮点而不是内联块，因为除非重置它们，否则空格会影响计算值

* { 框大小：边框框； } /*主体，这是第一组*/ 主体{ 背景颜色：浅灰色；高度：100vh；宽度：900px；左边距：100px；右边距：5px；浮动：左； } /*-----------------------*/ /*菜单是第二部分*/ 右包装{ 背景：bada55；宽度：calc100%-1005px；浮动：左；文本对齐：居中； } 右菜单{ 边框：2倍纯红；背景颜色：黄色；高度：30px；宽度：50px；显示：内联块； }

如果我没听错的话，试试这把小提琴

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%;
}
}

您应该尝试使用引导。这是一个框架，使格式化页面变得更容易。您可以通过在代码中包含以下行进行设置：

引导容器的宽度为12。因此，如果将第一个div的宽度设置为5，第二个div的宽度设置为3，则可以如下设置：

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

<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上方以使其居中。

使用以下方法：

<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>

代码中有3个div，显示的结构和演示结构完全不同。请编辑问题。谢谢，这是一个工作得更好的：D但是你能解释一下为什么你从全宽中减去了1005px吗？因为你有一个900像素宽的元素，它的总边距是105像素…所以900+105=1005我试着使用Bootstrap，但说实话，我不喜欢它><它很难定制，有时会弄乱整个页面…对于这种特殊情况，它很容易格式化。你不必在别的地方告诉我们BS3

<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>