.productInfoWrap{
width:1200px;
border-top:1px solid #D7D7D7;
border-bottom:1px solid #D7D7D7;
}
.productInfoWrap:after{display:block;clear:both;content:""}
.productInfoWrap .leftBox{
float:left;
/* border-left:1px solid #D7D7D7; */
}
.productInfoWrap .rightBox{
float:right;
width:498px;
height:394px;
background:yellow;
border-right:1px solid #D7D7D7;
}
.productInfoWrap .leftBox .prdThumBox{
position:relative;
width:702px;
height:394px;
border-left:1px solid #D7D7D7;
border-right:1px solid #D7D7D7;
}
.productInfoWrap .leftBox .prdThumBox img{
margin:auto;
position:absolute;
max-width:100%; max-height:100%;
max-width:702px;
max-height:394px;
top:0; bottom:0; left:0; right:0;
}
******** w3schools 방식
.productInfoWrap .firmDetail dl:after{content:"";clear:both;display:table;}
https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_clearfix2
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.img2 {
float: right;
}
</style>
</head>
<body>
<p>In this example, the image is taller than the element containing it, and it is floated, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>
<p style="clear:right">Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum...</div>
</body>
</html>
'기존카테고리 > CSS' 카테고리의 다른 글
| 체크박스2 (0) | 2018.03.15 |
|---|---|
| 체크박스1 (0) | 2018.03.15 |
| Left 높이(100%) 만들기 + 부모 넓이 인식시키기 (0) | 2018.03.10 |
| Div 간격이 있을 경우 font-size:0; 를 준다. (0) | 2018.02.01 |
| border 사이즈 합치기 (0) | 2018.02.01 |