브라우저 창의 크기를 조정할 때이 div가 돌아 다니는 이유는 무엇입니까?

브라우저 크기를 조정할 때 몇 개의 div 상자를 유지하려고합니다. 브라우저 크기를 조금 줄이면 오른쪽 하단의 div (vd-grid-sub-box)가 계속 흐트러져 보입니다. 또한 vd-grid-right-col은 크기를 조금 더 줄이면 배너와 겹치기도합니다.브라우저 창의 크기를 조정할 때이 div가 돌아 다니는 이유는 무엇입니까?

나는 이것을 이해하려고 많은 시간을 할애해야하기 때문에 무엇을해야할지 확신이 없습니다. 무엇을해야할지 알지 못한다. 나는 새로운 것이므로 무엇을해야하는지 잘 설명해주십시오. 이 모든 것은 정적에서 유동으로 웹 사이트를 변경해야 할 때 시작되었습니다. 즉 모든 픽셀을 백분율로 변경해야한다는 의미입니다. 내가 잘못 했니?

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<title>Vivid Shop Display</title> 
<link rel="stylesheet" href='css/vivid-style.css'> 
<link rel='stylesheet' href='css/scroller.css'> 
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
</head> 

<body> 
<header> 
<div class="vd-navigation-wrapper"> 
    <div class="vd-settings-wrapper"> 
     <div class="vd-user-settings"> 
     </div> 
     <div class="vd-currency-selector"> 
     </div> 
     <div class="vd-language-selector"> 
     </div> 
    </div> 
    <div class="vd-nav-wrapper"> 
      <ul> 
       <li>Shop</li> 
       <li>About</li> 
       <li class="vd-logo-img"><img src="img/vivid_logo.png"/></li> 
       <li>Lookbook</li> 
       <li>Contact</li> 
      </ul> 
    </div> 
     <div class="vd-cart-wrapper"> 
     <div class="vd-cart-selector"></div> 
     </div> 

</div> 

<!--Mobile Navigation--> 
    <nav class="vd-hide"> 
    <div class="header-top clearfix"> 
    <a class="nav toggle-menu" href="#"> 
     <i></i> 
     <i></i> 
     <i></i> 
    </a> 
    <h1 class="logo"><a href="#firstSection"><img src="img/harva_logo.png"/></a></h1> 
    </div> 
    <ul id="menu"> 
     <li data-menuanchor="firstSection"> 
     <a href="#firstSection" title="First Section">First Section</a> 
     </li> 
     <li data-menuanchor="secondSection"> 
     <a href="#secondSection" title="Second Section">Second Section</a> 
     </li> 
     <li data-menuanchor="thirdSection"> 
     <a href="#thirdSection" title="Second Section">Third Section</a> 
     </li> 
     <li data-menuanchor="fourthSection"> 
     <a href="#fourthSection" title="Fourth Section">Fourth Section</a> 
     </li> 
     <li data-menuanchor="fifthSection"> 
     <a href="#fifthSection" title="First Slide">First Slide</a> 
     </li> 
     <li data-menuanchor="fifthSection/1"> 
     <a href="#fifthSection/1" title="Second Slide">Second Slide</a> 
     </li> 
    </ul> 
    </nav> 
    </div> 
</header> 
<!--End Mobile Navigation--> 

<div class="vd-page-container"> 
<div class="vd-grid"> 
    <div class="vd-grid-left-col"> 
    <div class="vd-grid-main-box vd-margin-bottom"> 
    <div class="vd-text-wrap"> 
     <h1>Header Text</h1> 
     <h2>Secondary Title</h2> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
</div> 
    </div> 
    <div class="vd-grid-sub-box"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    <div class="vd-grid-sub-box vd-margin-right vd-margin-left"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    <div class="vd-grid-sub-box"> 
     <h3>Header Text</h3> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    </div> 
    <div class="vd-grid-right-col vd-margin-left"> 
    <div class="vd-grid-xtra-box"> 
     <h4>Header Text</h4> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
     <div class="vd-grid-xtra-box vd-margin-top vd-margin-bottom"> 
    <h4>Header Text</h4> 
     <p>Featured Text Here over two lines 
if needed place here.</p> 
    </div> 
    </div> 
</div> 
</div> 
<div class="clear"></div> 
    <footer class="vd-footer"> 
     <div class="vd-widget-area"> 
     <div class="vd-footer-text"> 
      <h4 class="vd-footer-title">V I V I D - SHOPIFY THEME</h4> 
      <div class="rte">V I V I D is a customisable theme that looks and feels fantastic. Showcase your products on the visually stunning V I V I D Grid and choose your structure then let V I V I D do the rest!</div> 
     </div> 
      <div class="vd-footer-links"> 
       <h4 class="vd-footer-title">HELP</h4> 
      <ul> 
       <li><a class="" href="#">HELP | FAQ'S</a></li> 
       <li><a class="" href="#">RETURNS</a></li> 
       <li><a class="" href="#">HOW TO SHOP</a></li> 
       <li><a class="" href="#">CONTACT US</a></li> 
       <li><a class="" href="#">STOCKISTS</a></li> 
      </ul> 
      </div> 
     <div class="vd-footer-links"> 
      <h4 class="vd-footer-title">POLICIES</h4> 
      <ul> 
       <li><a class="" href="#">DELIVERY &amp; RETURNS POLICY</a></li> 
       <li><a class="" href="#">TERMS &amp; CONDITIONS</a></li> 
       <li><a class="" href="#">PRIVACY POLICY</a></li> 
       <li><a class="" href="#">SECURITY POLICY</a></li> 
      </ul> 
      </div> 
    <div class="vd-footer-links"> 
     <h4 class="vd-footer-title">CONNECT</h4> 
      <ul> 
       <li><a class="vd-social-icon facebook" href="#" target="_blank">FACEBOOK</a></li> 
       <li><a class="vd-social-icon twitter" href="#" target="_blank">TWITTER</a></li> 
       <li><a class="vd-social-icon instagram" href="#" target="_blank">INSTAGRAM</a></li> 
       <li><a class="vd-social-icon vimeo" href="#" target="_blank">VIMEO</a></li> 
      </ul> 
      </div> 
     <div class="vd-signup"> 
      <h4 class="vd-footer-title">SIGN UP TO OUR NEWSLETTER</h4> 
      <div class="wht">HTML Block to be added here for embedded email capture forms</div> 
     </div> 
    </div> 
    <div class="vd-sub-footer"> 
     <ul class="vd-payment-options"> 
      <li class="vd-payment-icon american-express"></li> 
      <li class="vd-payment-icon bitcoin"></li> 
      <li class="vd-payment-icon jcb"></li> 
      <li class="vd-payment-icon master"></li> 
      <li class="vd-payment-icon paypal"></li> 
      <li class="vd-payment-icon visa"></li> 
     </ul> 
    <div class="vd-copyright-wrapper"> 
     <p class="vd-copyright">Copyright © 2017 V I V I D Themes.</p> 
     <p class="vd-attribution">"Virtual Visual Merchandising"</p> 
    </div> 
    </div> 
</footer> 
</body> 
</html>

CSS :

@charset "UTF-8"; 
/* CSS Document */ 


/*Vivid Global Styling*/ 
html {} 
body { 
    margin:0px; 
    padding:0px; 

    } 
h1,h2,h3,h4,h5,h6,p,ul,li,span { 
    margin:0px; 
    padding:0px; 
    } 
h1 { 
    margin:0 0 14px 0; 
    } 
h2 { 
    margin:0 0 10px 0; 
    } 
.wht { 
    color:#fff; 
    } 
.clear { 
    clear:both; 
    } 
/*Vivid Page Settings*/ 
header { 
    width:100%; 
    background-color:#fff; 
    border-bottom:#000 1px solid; 
    } 
.vd-hide { 
    display:none; 
    } 
.vd-settings-wrapper { 
    width:15%; 
    max-width:200px; 
    } 
.vd-user-settings { 
    width:48px; 
    height:48px; 
    border:1px solid #000; 
    background-color:#fff; 
    float:left; 
    margin: 12px 2px 0 21px; 
    } 
.vd-currency-selector { 
    width:58px; 
    height:21px; 
    border:1px solid #000; 
    background-color: #fff; 
    float:left; 
    margin: 12px 2px 1px 2px; 
    } 
.vd-language-selector { 
    width:58px; 
    height:21px; 
    border:1px solid #000; 
    background-color: #fff; 
    float:left; 
    margin:3px 2px 0 2px; 
    } 

/*Vivid Main Navigation*/ 
.vd-nav-wrapper { 
    width:75%; 
    height:78px; 
    margin:0 auto; 
    text-align:center; 
    } 
.vd-nav-wrapper ul { 
    font-family: 'Montserrat', sans-serif; 
    text-align:center; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    } 
.vd-nav-wrapper li { 
    text-decoration:none; 
    list-style:none; 
    display:inline-block; 
    margin: 22px 20px; 
    vertical-align: middle; 
    } 
.vd-nav-wrapper a { 
    text-decoration:none; 
    list-style:none; 
    display:inline-block; 
    margin: 18px 20px; 
    vertical-align: middle; 
    } 
.vd-logo-img { 
    margin:0px; 
    padding:0px; 

    } 
/*Vivid Checkout Settings*/ 
.vd-cart-wrapper { 
    width:10%; 
    z-index:10; 
    } 
.vd-cart-selector { 
    width: 48px; 
    height: 48px; 
    border: 1px solid #000; 
    background-color: #fff; 
    margin: -11px 31px 0 2px; 
    position: absolute; 
    top: 23px; 
    right: -9px; 
    } 

/*Vivid Main Wrapper*/ 

.vd-page-container { 
    width: 100%; 
    margin:0 auto; 
    } 

/*Vivid Grid*/ 
.vd-grid h1,h2,h3,h4,h5,h6 { 
    font-family: 'Montserrat', sans-serif; 
    line-height:32px; 
    color:#fff; 
    } 
.vd-grid p,span { 
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    line-height:17px; 
    font-size:0.85em; 
    margin:0; 
    padding:0; 
    color:#fff; 
    } 
.vd-grid h1 { 
    margin:0; 
    padding:0; 
} 
.vd-grid h2 { 
    font-size:1.2em; 
    margin:0 0 4px 0; 
    } 
.vd-grid h3 { 
    margin:4px 0 4px 0; 
    } 
.vd-grid h4 { 
    margin:4px 0 4px 0; 
    } 
.vd-grid { 
    width: 98.6%; 
    margin:13px auto; 
    } 
.vd-grid-left-col { 
    width: 77.6%; 
    float:left; 
    } 
.vd-grid-right-col { 
    width: 17.8%; 
    float:left; 
    } 
.vd-grid-main-box { 
    width: 93.5%; 
    height: 460px; 
    background-color: #000029; 
    padding: 20px 30px; 
    } 
.vd-grid-main-box img { 
    width:100%; 
    height:auto; 
    position:absolute; 

    } 
.vd-grid-sub-box { 
    width: 27.3%; 
    height:146px; 
    background-image:url(../img/granda_hj.jpg); 
    background-size:cover; 
    background-position:top center; 
    background-color:#000029; 
    float:left; 
    padding: 15px 25px; 
    margin:0 0 15px 0; 
    } 
.vd-grid-xtra-box { 
    width:225px; 
    height:318px; 
    background-image:url(../img/tst_img.jpg); 
    background-size:cover; 
    background-position:center center; 
    background-color:#000029; 
    padding: 10px 20px; 
    } 
.vd-text-wrap { 
    width:100%; 
    position:relative; 
    top:340px; 
    left:0px; 
    } 
.vd-margin-top { 
    margin-top:10px; 
    } 
.vd-margin-right { 
    margin-right:10px; 
    } 
.vd-margin-left { 
    margin-left:10px; 
    } 
.vd-margin-bottom { 
    margin-bottom:10px; 
    } 
/*Vivid Footer*/  
.vd-footer { 
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
    line-height:16px; 
    padding: 0 30px; 
    padding-bottom: 55px; 
    background-color: #000029; 
    -webkit-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-webkit-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    -moz-transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),-moz-transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
} 
.vd-widget-area { 
    padding: 15px 0 10px; 
    border-top: 0px solid #e5e5e5; 
    max-width: 1260px; 
    margin: 0 auto 0px; 
} 
.vd-footer-text { 
    display: inline-block; 
    vertical-align: top; 
    width: 26%; 
    padding-right: 60px; 
    font-size: 12px; 
    color: white; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.vd-footer-links { 
    display: inline-block; 
    vertical-align: top; 
    padding: 0 30px 25px 0; 
    width: 12%; 
    line-height:22px; 
    font-size: 12px; 
    color: white; 
} 
.vd-footer-links ul { 
    margin: 0; 
    padding: 0; 
    list-style: outside none; 
    display: block; 
    vertical-align: top; 
} 
.vd-footer-links li { 
    font-size: 12px; 
    color: white; 
    text-decoration:none; 
    } 
.vd-footer-links a { 
    font-size: 12px; 
    color: #ccc; 
    text-decoration:none; 
    } 
.vd-footer-links a:hover { 
    font-size: 12px; 
    color: white; 
    } 
.vd-footer-title { 
    font-family: 'Montserrat', sans-serif; 
} 
.vd-signup { 
    display: inline-block; 
    max-width: 305px; 
    width: 26%; 
    font-size: 12px; 
} 
.vd-sub-footer { 
    border-top: 1px solid #e5e5e5; 
    padding-top: 25px; 
    margin-top: 0px; 
    font-size: 0; 
    max-width: 1260px; 
    margin: 0 auto; 
} 
/*Vivid Payment Icons*/ 
.vd-payment-icon { 
    font-size: 20px; 
    vertical-align: middle; 
    line-height: 1.2; 
    color: #a7a7a7; 
} 
.vd-footer-linklist .vd-social-icon:before { 
    font-size: 16px; 
    width: 16px; 
    text-align: center; 
    margin-right: 5px; 
    font-family: 'Social Icons'; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1; 
    font-weight: normal; 
    font-style: normal; 
    speak: none; 
    text-decoration: inherit; 
    text-transform: none; 
    text-rendering: optimizeLegibility; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.vd-payment-options { 
    float: right; 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    text-align: right; 
    font-size: 12px; 
    text-decoration:none; 
    display:block; 
    list-style: outside none; 
} 

.vd-payment-options ul { 
    display:block-inline; 
    list-style-type:outside none; 

} 
.vd-payment-options li { 
    display:block-inline; 
    float:right; 
    padding: 0 0 0 10px; 
    list-style-type:outside none; 

} 
.american-express:before { 
    content: "\f001"; 
} 
.bitcoin:before { 
    content: "\f006"; 
} 
.jcb:before { 
    content: "\f028"; 
} 
.master:before { 
    content: "\f02d"; 
} 
.paypal:before { 
    content: "\f033"; 
} 
.visa:before { 
    content: "\f045"; 
} 
/*Vivid Copyright*/ 
.vd-copyright-wrapper { 
    float: left; 
    margin: 0; 
    width: 50%; 
    font-size: 12px; 
    color: white; 
    -moz-font-smoothing: none; 
    font-smoothing: antialiased; 
    -webkit-font-smoothing: antialiased; 
} 
/*Vivid Responsive*/  
@media (min--moz-device-pixel-ratio: 1.3), 
    (-o-min-device-pixel-ratio: 2.6/2), 
    (-webkit-min-device-pixel-ratio: 1.3), 
    (min-device-pixel-ratio: 1.3), 
    (min-resolution: 1.3dppx) { 

}

부 필요가 도움 :

.vd-grid { 
    width: 98.6%; 
    margin:13px auto; 
    } 
.vd-grid-left-col { 
    width: 77.6%; 
    float:left; 
    } 
.vd-grid-right-col { 
    width: 17.8%; 
    float:left; 
    } 
.vd-grid-main-box { 
    width: 93.5%; 
    height: 460px; 
    background-color: #000029; 
    padding: 20px 30px; 
    } 
.vd-grid-main-box img { 
    width:100%; 
    height:auto; 
    position:absolute; 

    } 
.vd-grid-sub-box { 
    width: 27.3%; 
    height:146px; 
    background-image:url(../img/granda_hj.jpg); 
    background-size:cover; 
    background-position:top center; 
    background-color:#000029; 
    float:left; 
    padding: 15px 25px; 
    margin:0 0 15px 0; 
    } 
.vd-grid-xtra-box { 
    width:225px; 
    height:318px; 
    background-image:url(../img/tst_img.jpg); 
    background-size:cover; 
    background-position:center center; 
    background-color:#000029; 
    padding: 10px 20px; 
    } 
.vd-text-wrap { 
    width:100%; 
    position:relative; 
    top:340px; 
    left:0px; 
    } 
.vd-margin-top { 
    margin-top:10px; 
    } 
.vd-margin-right { 
    margin-right:10px; 
    } 
.vd-margin-left { 
    margin-left:10px; 
    } 
.vd-margin-bottom { 
    margin-bottom:10px; 
    }

출처

2017-02-02 Benjamints

도움을 드리고 싶지만 도움이 필요한 코드 부분 만 게시 할 수 있습니까? 전체 페이지의 문제점을 검색하기가 어렵습니다. – AymDev

예, 죄송합니다. – Benjamints

귀하의 3 클래스 vd-grid-sub-box이 <div>는 width의 백분율을 가지고 있지만, 자신의 padding은 에 픽셀 (사용자가 설정 한 cla 화면의 크기가 에서 화면 또는 컨테이너 크기가이 아닌 이 아닌 경우 세 번째 화면이 특정 화면 크기 아래로 이동하는 이유입니다.

당신은 당신의 상자의 크기에 따르면, margin의 백분율을 설정해야합니다.
의이 2 상자에 margin를 설정하자

(container size - (box width * number of boxes))/2 (the sides of the box) (100% - (27.3% * 3))/2 = 9.05% margin-left: 9.05%; margin-right: 9.05%;

보이는 테스트 한 후 당신은 여전히 당신의 3 상자의 오른쪽에 여백을 유지해야합니다. 이것은 컨테이너에 적용되거나 계산을 변경해야합니다.

출처

2017-02-02 11:07:45 AymDev

자세한 설명에 진심으로 감사 드리며, 제 상황을 이해하는 데 도움이되었습니다. 문제는 마진율 (9.05 %)이 완전히 움직이는 것 같습니다. 컨테이너의 크기를 변경하면 더 잘 유지할 수 있습니까? – Benjamints

오른쪽과 왼쪽 여백을 1 %로 변경하면 실제로 도움이되는 변화가있었습니다. – Benjamints

@ Benjamints 당신은 컨테이너의 오른쪽에 여백의'10px'가 필요합니다. 위의 큰 블록의 너비를 가진 컨테이너에 3 개의'vd-grid-sub-box'를 넣으면, 나는 완벽 할 것이라고 생각합니다 :-) – AymDev

브라우저 창의 크기를 조정할 때이 div가 돌아 다니는 이유는 무엇입니까?

답변

관련 문제