1
저는 이미지와 단락으로 구성된 두 개의 열 레이아웃을 사용하려고했습니다. 아이디어는 지그재그 식으로 배치하는 것입니다 (서로 대각선으로 동일한 요소).텍스트가 떠있는 이미지 주위를 감싸지 않습니다. 하지만 이미지가 떠 다니는 텍스트를 감싸고 있습니다.
코드에서 알 수 있듯이 두 개의 이미지가 왼쪽으로 떠 있고 두 단락이 왼쪽으로 떠 있습니다.
문제는 이미지가 부유하는 단락 주위를 완벽하게 감싸는 동안 단락이 부유 이미지 주위를 둘러 쌀 수 없다는 것입니다.
코드 :
#wrapper {
width: 70%;
margin: 2% auto;
}
.photo {
width: 48%;
margin: 1%;
}
.para {
width: 48%;
margin: 1%;
}
.left {
float: left;
margin: 1%;
}
.header {
position: relative;
top: 0;
width: 100%;
background-color: #D8E8ED;
}
.heading {
position: relative;
right: 33%;
font-family: helvetica;
font-weight: bold;
font-size: 30px;
}
.tagline {
position: relative;
right: 33%;
font-family: helvetica;
font-size: 12px;
}<!DOCTYPE html>
<html>
<head>
<title>Photo Blog</title>
<link rel="stylesheet" type="text/css" href="photo.css">
</head>
<body>
<div class="header">
<h1 class="heading">Photo Blog</h1>
<p class="tagline">A Collection Of Moments</p>
</div>
<div id="wrapper">
<img src="img/DSC01683.JPG" class="photo left">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in pulvinar elit. Sed vitae justo congue neque consequat volutpat. Pellentesque leo ipsum, ultrices et sem ut, dignissim pellentesque libero. Curabitur in mattis nibh. Nulla non sollicitudin
elit. Vivamus erat eros, egestas eget quam sit amet, malesuada laoreet sapien. Vestibulum at mattis lectus. Curabitur nunc augue, dictum eu fermentum non, dignissim eget diam.Donec facilisis eros felis, quis tristique libero ultricies tincidunt.
Praesent ullamcorper eget dui non hendrerit.
</p>
<p class="para left">
Nunc nec mauris a magna egestas vulputate in vel odio. Nunc purus ligula, suscipit et libero non, rutrum accumsan sapien. Mauris tortor massa, aliquam eu viverra id, interdum eu felis. Integer hendrerit massa quis est molestie consequat. Morbi ultricies,
leo ut euismod cursus, ligula ante sagittis ex, non gravida dui sapien at nunc. Ut at quam faucibus, posuere tortor et, volutpat ante. Sed accumsan ultrices arcu, id efficitur nunc maximus eget.Quisque vel eros semper, mattis magna sed, dignissim
leo.
</p>
<img src="img/DSC01716.JPG" class="photo left">
<div class="left">
<img src="img/DSC01780.JPG" class="photo left">
</div>
<p class="para">
Nunc vel finibus ante. Curabitur finibus, libero et mattis mattis, massa nulla bibendum eros, in maximus lorem elit egestas massa. Duis tellus nibh, aliquet sed vehicula non, elementum at purus. In efficitur venenatis ipsum, eu aliquam ex faucibus a.
Etiam blandit lobortis purus, et egestas diam lobortis a. Duis in iaculis turpis. Nullam turpis nisl, vulputate id mi eu, blandit auctor mi. Aenean volutpat venenatis est nec tempus. In cursus commodo tortor vitae ultrices. Vestibulum sed fermentum
enim. Praesent ac risus eu magna finibus ultricies.Curabitur tristique lobortis sem ut pulvinar. Aliquam et felis nec ipsum tincidunt tempor. Mauris ut sollicitudin lorem. Donec faucibus nisl id iaculis congue.
</p>
<p class="para left">
Morbi venenatis, tellus eu euismod efficitur, tellus velit posuere ante, eget tempus ex mi vitae sem. Nam et lorem pellentesque enim vehicula tempus. Maecenas et nibh et eros tincidunt pellentesque non ac ante. Maecenas et neque ex. Aenean placerat, odio
eu faucibus auctor, orci nibh egestas mi, nec imperdiet augue leo quis massa. Vestibulum sed accumsan nulla. Aliquam aliquet sem ante, ut dignissim quam eleifend eu. Nam sit amet dolor iaculis, porttitor arcu in, scelerisque sapien. Nulla auctor
bibendum tincidunt. Fusce blandit eros at auctor congue. Vestibulum magna justo, convallis ut volutpat vitae, fermentum at nisl.
</p>
<img src="img/DSC01820.JPG" class="photo left">
</div>
</body>
</html>
안녕하세요, 감사합니다. 그것은 완벽하게 작동했습니다. –