Question

您好我想创建一个包含多个div-box的网站。我想要使用的图片应该放在一个框中的文本旁边，在那里强制适合（不缩放）。请关注div＃conten-articles。有四篇文章以后应该可以通过外部工具进行配置。它们的浮动在左右之间交替，图片应该始终位于＃content-articles div的相对位置。希望我描述我的问题让你明白。

感谢您的帮助;）

＆＃13;

@charset "utf-8";

html{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: #F2F2F2; 
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: expresswayregular;
}

@font-face {
    font-family: 'expresswayregular';
    src: url('fonts/expressway_rg-webfont.woff2') format('woff2'),
         url('fonts/expressway_rg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#header {
	position: fixed;
	background: #333333;
	width: 100%;
	height: 50px;
	padding: 0;
	margin: 0;
	top: 0;
}

#header-content {
	background: #333333;
	width: 1280px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
}

#logo {
	position: absolute;
}

#currentsite-info font {
	position: absolute;
	height: 30px;
	width: auto;
	margin-left: 60px;
	padding: 10px;
	color: #fff;
	font-size: 26px;
}

#search-box {
	width: 400px;
	height: 50px;
	margin-right: auto;
	margin-left: auto;
}

#search {
	background: #fff;
	width: 356px;
	height: 16px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 6px;
	border: 1px solid #fff;
	border-radius: 6px 0 0 6px;	
}

#submit {
	float: right;
	background: #fff;
	width: 29px;
	height: 28px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0 6px 6px 0;	
}

#menu {
	margin-right: 30px;
	margin-left: 25px;
	z-index: 1000;
}

.menu-linkbox a{
	position: static;
	float: right;
	width: 60px;
	height: 14px;
	top: 0;
	padding: 18px 15px 18px 15px;
	color: #F2F2F2;
	font-size: 14px;
	text-decoration: none;
	text-align: center;
}

.menu-linkbox:hover a {
	color: #2997D3;
	transition: all 500ms;
}

#menu-linkbox-scene a {
	color: #2997D3;
}

#main-content {
	background: #fff;
    min-height: 100%;
    width: 1280px;
    margin: 0 auto;
	padding-top: 50px;
	overflow: auto;
}

#content-articles {
	background: #F2F2F2;
	width: 1220px;
	bottom: 0;
	margin: 20px;
	padding: 10px;
	border: 1px solid #000;
	overflow: auto;
}

#article1 {
	width: 60%;
	float: left;
	margin: 20px 30% 20px 60px;
	text-align: justify;
	word-spacing: 4px;
	border-right: 1px solid #2997D3;  
	border-left: 1px solid #2997D3; 
}

#article2 {
	width: 60%;
    float: right;
    margin: 20px;
    text-align: justify;
    word-spacing: 4px;
    border-right: 1px solid #2997D3;
    border-left: 1px solid #2997D3;
}

#article2-photo2-box {
	width: auto;
	height: auto;
	float: left;
	margin: 20px;
}

#photo2 {
	width: 300px;
	height: 300px;
}

#article3 {
	width: 60%;
	float: left;
	margin: 20px 30% 60px 80px;
	text-align: justify;
	word-spacing: 4px;
	border-right: 1px solid #2997D3;  
	border-left: 1px solid #2997D3; 
}

#article4 {
	width: 60%;
    float: right;
    margin: 20px;
    text-align: justify;
    word-spacing: 4px;
    border-right: 1px solid #2997D3;
    border-left: 1px solid #2997D3;
}

#player {
	background: #333333;
	position : fixed;
	bottom: 0;
	width: 100%;
	height: 50px;
}

#player-content {
	background: #333333;
	width: auto;
	height: 50px;
	margin-left: 200px;
	margin-right: 200px;
	font-size: 25px;
	
}

h1 {
	color: #2997D3;
	font-size: 20px;
	margin: 20px;	
}

p {
	margin: 20px;	
}

a {
	color: #2997D3;
}

＆＃13;

<!doctype html>
<html>

	<head> 
	
		<meta charset="utf-8">
		
		<link rel="stylesheet" type="text/css" href="stylesheet_news.css">
		
		<link rel="icon" href="images/logo_site.png">
		
		<title>News</title>
	
		<script>
			function toggleNavPanel(x){
				var panel = document.getElementById(x), navarrow = document.getElementById("navarrow"), maxH="300px";
				if(panel.style.height == maxH){
					panel.style.height = "0px";
					navarrow.innerHTML = "&#9662;";
				} 
			
				else {
					panel.style.height = maxH;
					navarrow.innerHTML = "&#9652;";
				}
			}
		</script>
	
	</head>
	
	<body>
	
		<div id="header">
		
			<div id="header-content">
		
				<img id ="logo" src="images/logo.png" />
				
				<div id="currentsite-info">
				
					<font>News</font>
				
				</div>
				
				<div id="menu">					
					
					<div class="menu-linkbox" id="menu-linkbox-breaking"><a href="../Breaking/index_breaking.html">Breaking</a></div>
						
					<div class="menu-linkbox" id="menu-linkbox-live"><a href="../Live/index_live.html">Live</a></div> 

					<div class="menu-linkbox" id="menu-linkbox-scene"><a href="index_news.htnl">News</a></div>

					<div class="menu-linkbox" id="menu-linkbox-home"><a href="../../index.html">Home</a></div>
					
				</div>
				
				<div id="search-box">
			
					<form action="http://www.google.com/search" method="get">
			
						<input id="search" type="text" name="q" placeholder="Search">
			
						<input id="submit" type="image" src="images/search.png" alt="Submit">
		 
					</form>
			
				</div>
			
			</div>
			
		</div>
		
		<div id="main-content">
		
			<div id="content-articles">
			
				<div id="article1">	
					
					<h1>Assignment</h1>
			
					<p>
			
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
					
					<a href="https://www.google.de/">Weiterlesen</a>
					
					</p>
			
				</div>
				
				<div id="article2">	
					
					<h1>Assignment</h1>
			
					<p>
			
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
			
					<a href="https://www.google.de/">Weiterlesen</a>
			
					</p>
				
				</div>
				
				<div id="article2-photo2-box">
				
					<img id ="photo2" src="images/footage/article1.jpeg" />
				
				</div>
				
				<div id="article3">	
					
					<h1>Assignment</h1>
			
					<p>
					
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
			
					<a href="https://www.google.de/">Weiterlesen</a>
			
					</p>
			
				</div>
				
				<div id="article4">	
					
					<h1>Assignment</h1>
			
					<p>
			
					Lorem ipsum dolor sit amet, ei ius audire utroque, eum et ferri delectus. Nonumy possim antiopam ius no, te sit posse quando, volumus legendos vel ea. Commodo fabellas sea id. No feugait ocurreret mediocritatem est, eu alia enim percipit his. Regione delicatissimi ea his, denique disputando has id, ne qui etiam placerat.

					Ne eligendi invidunt incorrupte sed, dolore luptatum periculis no mel. Has id theophrastus signiferumque, mea cu eirmod latine prodesset. Alia brute eligendi te sea, vis cu cibo nihil. Te dictas invenire rationibus vix.

					Ei has oratio appetere, possit fuisset pro id. Mei ea ullum primis. Cum ubique quaerendum an, an per dicit ocurreret definitionem. His ne ferri detraxit efficiendi. Cu prima iusto lucilius usu, mea no natum exerci, quis ullamcorper vel at.

					Eius pertinacia moderatius in eam. Usu iudico delenit ea. Assueverit mediocritatem te eum, et possim deterruisset eum. Sit id graeci epicurei suavitate, vidit ponderum suscipiantur has in, nam agam liberavisse reprehendunt ad.

					Per fuisset praesent ut, vim in rebum prompta mandamus. Abhorreant mnesarchum dissentiunt id his, mei id elitr soluta. Ex persius minimum deterruisset sit. Ex mea case idque elaboraret, natum abhorreant in est. Eu virtute diceret salutatus ius, ne qui purto porro prompta.
			
					<a href="https://www.google.de/">Weiterlesen</a>
			
					</p>
			
				</div>
				
			
			</div>
		
		</div>
		
	<!--
		<div id="player">
			
			<div id="player-content">
			
			
			
			</div>	

		</div>
	-->
	
	</body>

</html>

＆＃13;

如何将图片与除此之外的文本对齐

0 个答案: