Question

我有疑问。我学习编码，我在这个网站上找不到任何答案。

我在<div>中有三个<body>个元素。两个<div>元素需要向左浮动，第三个<div> - 向右浮动。权利<div>失败了。我需要它去顶部。您可以在下面找到代码和图片

<!DOCTYPE html>

<html lang="en-Us">

<head>

<title>Архив Луганской области</title>
<meta charset="UTF-8">

<style>
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:0.8em;
	margin:0px;
	padding:0px 60px 0px 60px;
	}

#line {
	padding:0px;
	margin:0px;
	}

#contacts {
	float:left;
	width:800px;
	vertical-align:top;
	}

#container {

	float:right;
	}

#services {
	
	width:500px;
	position:relative;
	}

#news {
	width:500px;
	border-left:4px solid #C4C4C4;
	position:relative;
	}



</style>

<script src="http://maps.googleapis.com/maps/api/js"></script>


<script>
function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(48.569725,39.321948),
    zoom:8,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>



</head>

<body>

<div id="head">
<h3>Украина, Луганск<h3>
</div>

<div id="line">

<hr> </hr>

</div>

<div id="contacts">

<h5>Режим работы</h5>
<pre><h2>Пон-Суб   7:00-22:00</h2></pre>

<h5 title="Позвоните и Закажите!">Телефон</h5>
<h2> +7 (978) 768-94-69</h2>
<h2>Совгыря Федор</h2>


<h5> E-mail:</h5>
<h2>fedor.sovgirya@gmail.com</h2>

<h5>Мессенджер</h5>
<h2> Skype sovgirya.fedor </h2>

<h5>Адрес:</h5>

<h2> Украина, г. Луганск, ул. Советская, 17 </h2>

</div>



<div id="container">

<div id="services">

<h3>Совгыря Федор Николаевич</h3>

<p> 

1) Составление родословной Вашего рода;
<br>2) Поиск биографии партийных и репрессированных членов семьи;
<br>3) Поиск фильтрационных дел родственников, угнанных в Германию в ВОВ; 
<br>4) поиск любой другой информации хранящейся в архивах Луганска и Луганской области.
<p>

</div>

<br> <br/>

<div id="news">
<h4>Новости</h4>

<p>10.01.2015 - Мы начали работать с архивами Луганска и Луганской области! <br>В случае отсутствия доступа к архивным документам по причине нестабильной ситуации, мы напишем объявлние в этом разделе. </p>

</div>

</div>



<div id="googleMap" style="width:500px;height:380px;"></div>

</body>

Answer 1

浮点数工作正常，左侧元素上的width非常大，因此分辨率较小时，右侧元素会被按下。减少contacts上的宽度，你应该看到你想要的东西。

请参阅Fiddle

我还添加了一个wrapper，其中明确设置了width，以表明您的代码在大分辨率下运行正常。

div元素下降

1 个答案: