我不能在相同的位置级别制作两个区块。

时间：2015-04-17 14:06:00

标签： html css

在此代码段中，您可以看到代码。 我想将mid_left和mid_right放在同一个div标记mid中。但是我可以'mid_right标记mid，或者与mid_left标记位置相同。我尝试了float:left和display:inline-block，但没有一个正在运作，我该如何解决？

/* CSS Document */
body {
	margin:0 auto;
	padding: 0;
	background: url(../img/7_092641_2_meitu_1.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 15px; 
	color: #E2E2E2; 
	line-height: 24px; 
	font-family: '微软雅黑';
	}
.logo {
	width: 400px;
	hight: 380px;
	margin: -610px auto 0 -40px;
	position:fixed;
	}
.wrapper {
	width: 1100px;
	height: auto !important;
	margin: 0 auto;
	background-color:#F7F7F7;
	}

.header {
	width: 1050px;
	height: 100px;
	margin: 0 auto;
	border: 1px;
	/*background-image: url(../../../Stockholm-Sweden.jpg);*/
	}
.header h1 {
	font-size: 40px;
	font-weight: 900;
	font-family: '仿宋_GB2312';
	margin: 0 auto;
	padding-top: 18px;
	}
/*------------------  NAV ------------------------*/
.container {
	width: 1090px;
	height:50x;
	background : #464646;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
	margin: 0 auto;
	}
ul {
    margin: 0;
    padding: 0;
}
 
ul.menu {
    height: 50px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
}
 
ul.menu li {
    list-style: none;
    float:left;
    height: 49px;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
    }
 
ul li a {
    display: block;
    padding: 0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    line-height: 49px;
	font-size: medium;
	font-weight: bold;
	color: #FFF;
	font-family: '微软雅黑';
	text-decoration:none;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
    }
 
ul li a:hover {
    background: transparent none;
}
 
ul li.active a{
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

/*------------ slider ---------------*/
.slider_1 {
	height: 400px;
	width: 1090px;
	margin: 20px auto 0 auto;
	overflow: hidden;
	
	}
/*----------- mid ------------------*/
.mid {
	height:auto;
	width:1000px;
	margin:0 auto;
	font-family:'仿宋_GB2312';
	border: solid 1px #CCCCCC;
	}
.mid a {
    text-decoration: none;

	}
.mid_span {
	height:45px;
	line-height:45px;
	color:#004276;
	font-size:18px;
	font-weight:bold;
	margin-right:6px;
	}
.mid_left {
	height: auto;
	width: 490px;
	margin: 0 auto 0 5px;
	border-right: dashed #F2F2F2;
	diaplay: inline-block;
	}
.mid_right {
	height: auto;
	width: 480px;
	margin: 0 10px 0 auto;
	}
.mid_left_1 {
	width: 100%;
	height: auto;
	margin: 0 auto;
	}
.date {
	color: #CECECE;
	line-height:22px;
	font-size: 12px;
	}
.detail {
	color:#BA2636;
	}

.brif {
	color:#454545;
	line-height:22px;
	margin-top: -5px;
	}
.tittle {
	height:80px;
	width:1050px;
	margin: 20px auto 10px auto;
	text-align: center;
	}
.tittle h2 {
	font-family:'微软雅黑';
	font-size: 24px;
	font-weight: bold;
	color: #292c2f;
	display: inline-block;
	}
.tittle_line{
	background: url(../img/title_line.png) no-repeat;
	width: 350px;
	height: 8px;
	margin: 0 10px 5px 10px;
	display: inline-block;
	}







footer {
	width:1050px;
	height:auto;
	margin: 0 auto;
	posion: absolute;
	
	}
.footer-distributed{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 10px 25px 5px 25px;
	margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 40%;
	margin-left: 40px;
}

/* The company logo */

.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Cookie', cursive;
	margin: 0;
}

.footer-distributed h3 span{
	color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}

.footer-distributed .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	font-weight: normal;
	margin: 0;
}

/* Footer Center */

.footer-distributed .footer-center{
	width: 35%;
}

.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}

.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}

.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}

.footer-distributed .footer-center p a{
	color:  #5383d3;
	text-decoration: none;;
}


/* Footer Right */

.footer-distributed .footer-right{
	width: 20%;
}

.footer-distributed .footer-icons{
	margin-top: 25px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;

	margin-right: 12px;
	margin-bottom: 5px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>旅游导航</title>
<meta name="description" content="北欧旅游" />
<meta name="keywords" content="各种索引条目" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/pgwslider.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>


</head>

<body>	
<div class="wrapper">
	<div class="header">
    	<h1>Header</h1>
	</div><!-- header -->
<div class="container">

<ul class="menu">
<li><a href="index.html">HOME</a></li>
<li><a href="tour.html">ABOUT</a></li>
<li><a href="#">HOME</a></li>
<li><a href="beiou.html">HOME</a></li>
<li><a href="#">HOME</a></li>
<li><a href="#">HOME</a></li>
</ul>
	</div><!--navigation -->
    

<div class="tittle">
	<div class="tittle_line"></div>
	<h2>EXAMPLE</h2><div class="tittle_line"></div>
		</div><!-- tittle -->

<div class="mid">
	<div class="mid_left">
    	<div class="mid_left_1">
        	<a  target="_blank" href="#" title="投资移民瑞典能享受欧盟待遇吗？" class="mid_span">投资移民瑞典能享受欧盟待遇吗？</a>
			<span class="date">(02/11 14:50)</span> <br>
			<p class="brif">投资移民瑞典能享受欧盟待遇吗？获得欧盟成员国的国籍，也意味着被整个欧盟接纳，直接成为欧盟公民，享受整个欧盟范围内的各种优待，包括经商，接受教育，找工作，都能够享受欧盟优先的原则。...<span  class="detail">[</span><a href="http://ouzhou.533.com/606/471585.html" title="" class="detail">详细</a><span class="detail">]</span></p>

        </div><!--med left 1 -->
        <div class="mid_left_1">
        	<a  target="_blank" href="#" title="一步到位获得瑞典移民身份享福利" class="mid_span">一步到位获得瑞典移民身份享福利</a>
			<span class="date">(02/11 14:50)</span> <br>
			<p class="brif">一步到位获得瑞典移民身份享福利。瑞典移民者在获得身份的同时，就能即刻享受福利，而一些国家规定则没有这么宽松，比如澳洲商业移民，在获得4年期的临时商务签证的期间，必须成功经营企业才能进一步申请转为移民，而...<span  class="detail">[</span><a href="http://ouzhou.533.com/606/471585.html" title="" class="detail">详细</a><span class="detail">]</span></p>

        </div><!--med left 1 -->
        <div class="mid_left_1">
        	<a  target="_blank" href="#" title="瑞典移民福利“一辈子都很幸福”" class="mid_span">瑞典移民福利“一辈子都很幸福”</a>
			<span class="date">(02/11 14:50)</span> <br>
			<p class="brif">瑞典移民申请材料有哪些，如果您计划到瑞典与您的丈夫、妻子、同居伴侣或者您的孩子或者其他近亲属长期居住，那么就应当了解申请居留许可之前要准备哪些申请材料。...<span  class="detail">[</span><a href="http://ouzhou.533.com/606/471585.html" title="" class="detail">详细</a><span class="detail">]</span></p>

        </div><!--med left 1 -->
        <div class="mid_left_1">
        	<a  target="_blank" href="#" title="欧洲各国移民福利大比拼 " class="mid_span">欧洲各国移民福利大比拼 </a>
			<span class="date">(02/11 14:50)</span> <br>
			<p class="brif">欧洲各国移民福利大比拼。2015年，欧洲移民政策将更加成熟稳定，也将受到市场更广泛的认可。下面就随小编来看看欧洲各国移民福利吧！看看有没有适合您的那一款。...<span  class="detail">[</span><a href="http://ouzhou.533.com/606/471585.html" title="" class="detail">详细</a><span class="detail">]</span></p>

        </div><!--med left 1 -->
</div><!--mid left -->
    <div class="mid_right">
23t2erse452
    </div>
    
    </div><!--mid-->


<footer class="footer-distributed"><!--footer-->

			<div class="footer-left">

				<h3>Feito<span>AB</span></h3>

				<p class="footer-company-name">Feito AB &copy; 2015</p>
			</div>

			<div class="footer-center">

				<div>
					<i class="fa fa-map-marker"></i>
					<p><span>Mejerigatan 29</span> Göteborg</p>
				</div>

				<div>
					<i class="fa fa-phone"></i>
					<p>+1 555 123456</p>
				</div>

			</div>
<!--            
            <div class="footer-right">
            	<div>
					<i class="fa fa-envelope"></i>
					<p><a href="mailto:support@company.com">support@company.com</a></p>
				</div>
            </div>
-->
			<div class="footer-right">
		<div class="footer-icons">

					<a href="#">
                    	<img src="img/footer/1.jpg" alt="facebook">
                    </a>
					<a href="#"><img src="img/footer/2.jpg" alt="facebook"></a>
					<a href="#"><img src="img/footer/3.jpg" alt="linkedin"></a>
					<a href="#"><img src="img/footer/4.jpg" alt="mewo"></a>

				</div>

			</div>
            

		</footer><!--footer-->   
</div><!--wrapper-->

</body>
</html>

5 个答案:

答案 0 :(得分：0)

将.mid位置设置为relative，将mid_left和mid_right位置设置为absolute。然后mid_left和mid_right将叠加在一起，mid_right位于顶部，因为它出现在HTML的后面。

答案 1 :(得分：0)

确保您了解盒子模型的工作原理。

http://www.w3schools.com/css/css_boxmodel.asp

当您添加边框和填充等属性时，它会有效地添加到框的宽度。

因此，如果容器div为1000px，则需要确定两件事：

  1. 如果你想在容器内有2个div，宽度为500px（左边一个，右边一个），请确保宽度+边框+填充不超过500px限制。

  2. 使用内联块时，可能会出现在两个块之间渲染空白区域的情况，有效地将第二个区域向右推几个像素。如果您可以控制HTML，请确保左右div之间不存在空格。如果你无法控制它，你可以给包含元素font-size：0px;然后只需在左右元素内重置字体大小（例如16px）。

答案 2 :(得分：0)

添加display：inline-block;对于我来说，.mid_left和.mid_right类都非常适合。如果你在这两个div之间没有空格，也请检查。

答案 3 :(得分：0)

要使用当前代码，请进行以下调整：

更正display中diaplay的拼写：

.mid_left {
    display: inline-block;
}

然后将display: inline-block;添加到.mid_right。

以下是一个示例：JSFiddle。

希望这能解决您的问题。

答案 4 :(得分：-1)

你有几个选择

  1. flexbox。取决于浏览器支持。如果你有IE10 +那么这就是你要走的路

    2. 父项上的

  2. display: table和左/右容器上的display: table-cell

  3. 保持容器在页面流中的最大高度和position: absolute第二个容器。然后在定位的容器上添加height: 100%

相关问题
最新问题