两个div之间的中心div

时间：2015-09-09 14:02:49

标签： html css

如何在两个其他div之间居中.middle div？我试过保证金：0自动; margin-left：auto，margin-right：auto;但是我无法达到正确的效果。这个.middle div应该在两者之间。

全屏查看我的意思。

谢谢。

＆＃13;
＆＃13; 
div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 300px;
    background-color: #C7E6FF;
    float: left;
    margin-top: 64px;
}
.middle {
    width: 300px;
    background-color: #DEF0FF;
    margin-top: 64px;
    float: left;
}
.right {
    width: 300px;
    background-color: #C7E6FF;
    float: right;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}
＆＃13; 
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Resume</title>
	</head>
	<body>
	<div id="header">
	    <h1>My <span>Resume</span></h1>
	</div>
	<div class="left">
	    <h2>Left Column</h2>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	        </ul>
	</div>
		<div class="middle">
	    <h2>Centered Center Column</h2>
	        <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
	</div>
	<div class="right">
	    <h4>Right Column</h4>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	       </ul>
	</div>
	<div style="clear:both; border:none; border-radius: none;"></div>
	<div id="footer">
	    <p>© 2015 Me - the Programmer</p>
	</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：4)

您可以将3个容器包装成一个并使用flexbox

基本上我添加了一个带有container-center类的容器和这个css：

.container-center {
    display: flex;
    justify-content: space-between;
    }

，如 JSFIDDLE

（我还从right，middle，left

中删除了浮动广告

答案 1 :(得分：4)

没有真正的简单方法可以使用浮动来实现这一点但如果将所有元素都包含在div（或其他语义元素）中则更简单并使用flexbox。

但是，您应该注意，即使使用flexbox，这也需要两个＆＃34;一边＆＃34;元素具有相同的宽度。

Codepen Demo因为SO片段具有重新宽度。

＆＃13;
＆＃13; 
div {
  border-radius: 4px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  color: #FFFFFF;
  padding-left: 25px;
  margin: 0;
  display: inline;
  font-size: 27px;
  line-height: 50px;
}

h2,h3,h4,h5,h6 {
  padding-left: 10px;
  margin: 10px 0 10px 0px;
  color: #00457D;
}

main {
  overflow: hidden;
  padding-top: 64px;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 300px;
  background-color: #C7E6FF;
}

.middle {
  width: 300px;
  background-color: #DEF0FF;
}

.right {
  width: 300px;
  background-color: #C7E6FF;
}

p {
  color: #00579E;
}

span {
  color: #D4EBFF;
}
＆＃13; 
<main>
  <div class="left">
    <h2>Left Column</h2>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
  <div class="middle">
    <h2>Centered Center Column</h2>
    <ul>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
    </ul>
  </div>
  <div class="right">
    <h4>Right Column</h4>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
</main>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

以下是一种使用HTML给定并使用浮点数的方法。

首先，在#header中，修复语法以便top: 10px，您需要单位（px）。

由于您的三个div已知宽度，因此您可以利用calc CSS函数来确定.left的正确边距 如下：

margin-right: calc(50% - 300px);

页面中心位于50％位置。取出.left元素宽度的200px，然后.middle元素的半宽度取100px。最终结果是.middle元素出现在页面中间，如您所愿。

但是，如果页面宽度足够窄，您可能需要为页面指定最小宽度，否则.middle元素可能会与.left重叠。或者，使用媒体查询处理小屏幕。

（请注意，我使用200px的宽度而不是300px，以便在代码编辑器的小窗口中安装演示。）

＆＃13;
＆＃13; 
div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10px;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 200px;
    background-color: #C7E6FF;
    float: left;
    margin-top: 64px;
    margin-right: calc(50% - 300px);
}
.middle {
    width: 200px;
    background-color: #DEF0FF;
    margin-top: 64px;
    float: left;
}
.right {
    width: 200px;
    background-color: #C7E6FF;
    float: right;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}
＆＃13; 
<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Resume</title>
	</head>
	<body>
	<div id="header">
	    <h1>My <span>Resume</span></h1>
	</div>
	<div class="left">
	    <h2>Left Column</h2>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	        </ul>
	</div>
		<div class="middle">
	    <h2>Centered Center Column</h2>
	        <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
	</div>
	<div class="right">
	    <h4>Right Column</h4>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	       </ul>
	</div>
	<div style="clear:both; border:none; border-radius: none;"></div>
	<div id="footer">
	    <p>© 2015 Me - the Programmer</p>
	</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

 s64 arm_clock::uptime()  
{
    u64 cntvct;
    asm volatile ("isb; mrs %0, cntvct_el0; isb; " : "=r"(cntvct) :: "memory");

    cntvct = ((__uint128_t)cntvct * NANO_PER_SEC) / this->freq_hz;
    return cntvct; 
}

这是你在找什么？

相关问题
最新问题