1. 首頁
  2. 問答
  3. 將div調整爲包含圖像的寬度

將div調整爲包含圖像的寬度

2017-06-14 30 views
0

因此，我創建了一個從左向右滾動的畫廊。我想要做的是讓div將圖片大小調整爲圖片的合併寬度，以便您不能將最終圖片滾動到虛無。目前我有一個固定的寬度。與inline-block的更換，這並不工作（也許是因爲從.country_holder 70％的寬度被強迫阻止行爲？）這是我當前的代碼：將div調整爲包含圖像的寬度

<ul> 
    <li class="country_holder" id="c_scotland"> 
     <div class ="g_title" id="g_scotland"><h6>Scotland</h6></div> 
     <div class="gallery_holder"> 
     <ul> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-1.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-2.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-3.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-4.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-5.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-6.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-7.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-8.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-9.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-10.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-11.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-12.jpg" height="150"></li> 
      <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-13.jpg" height="150"></li> 
     </ul> 
     </div> 
    </li> 
    </ul>

CSS：

.country_holder { 
    position:relative; 
    margin-top:2rem; 
    margin-bottom:2rem; 
    width:70%; 
    left:18.5%; 
    display:block; 
    overflow-y:scroll; 
    overflow-x:hidden; 
    overflow:-moz-scrollbars-horizontal; 
    border:1px solid black; 
} 

.gallery_holder{ 
    width:4000px; 
    height:150px; 
    position:relative; 
    background-color:none; 
} 

li.gallery_img{ 
    padding-right:2px; 
    float:left; 
    display:inline-block; 
    vertical-align:top; 
    height:150px; 
}

來源

2017-06-14 Scott

回答

0

純CSS的解決方案：

.country_holder { 
 
    position: relative; 
 
    margin-top: 2rem; 
 
    margin-bottom: 2rem; 
 
    left: 18.5%; 
 
    width: 70%; 
 
    display: block; 
 
    overflow-y: hidden; 
 
    overflow-x: scroll; 
 
    overflow: -moz-scrollbars-horizontal; 
 
    border: 1px solid black; 
 
} 
 

 
.gallery_holder { 
 
    white-space: nowrap; 
 
    height: 150px; 
 
    position: relative; 
 
    background-color: none; 
 
} 
 

 
li.gallery_img { 
 
    padding-right: 2px; 
 
    display: inline-block; 
 
    white-space:nowrap; 
 
    vertical-align: top; 
 
    height: 150px; 
 
}
<ul> 
 
    <li class="country_holder" id="c_scotland"> 
 
    <div class="g_title" id="g_scotland"> 
 
     <h6>Scotland</h6> 
 
    </div> 
 
    <div class="gallery_holder"> 
 
     <ul> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-1.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-2.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-3.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-4.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-5.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-6.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-7.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-8.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-9.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-10.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-11.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-12.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-13.jpg" height="150"></li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>

或者你可能只想滾動的圖像，而不是標題：

.country_holder { 
 
    position: relative; 
 
    margin-top: 2rem; 
 
    margin-bottom: 2rem; 
 
    left: 18.5%; 
 
    width: 70%; 
 
    display: block; 
 
    border: 1px solid black; 
 
} 
 

 
.gallery_holder { 
 
    width: 100%; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 

 
.gallery_holder ul { 
 
    white-space: nowrap; 
 
    height: 150px; 
 
    position: relative; 
 
    background-color: none; 
 
} 
 

 
li.gallery_img { 
 
    padding-right: 2px; 
 
    display: inline-block; 
 
    white-space:nowrap; 
 
    vertical-align: top; 
 
    height: 150px; 
 
}
<ul> 
 
    <li class="country_holder" id="c_scotland"> 
 
    <div class="g_title" id="g_scotland"> 
 
     <h6>Scotland</h6> 
 
    </div> 
 
    <div class="gallery_holder"> 
 
     <ul> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-1.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-2.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-3.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-4.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-5.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-6.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-7.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-8.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-9.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-10.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-11.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-12.jpg" height="150"></li> 
 
     <li class="gallery_img"><img src="Assets/Images/Gallery/ScotlandGallery-13.jpg" height="150"></li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
</ul>

來源

2017-06-14 08:09:06

+0

這是完美的 - 非常感謝！ – Scott

+0

@ Scott很高興幫助你，請閱讀[當有人回答]（https://stackoverflow.com/help/someone-answers）知道你應該做什麼，當有人回答你的問題:) –

+0

再次感謝 - 沒有意識到這個！ – Scott

0

請嘗試此：

var gallery_holder_width = 0; 
 
jQuery('.gallery_holder ul li.gallery_img').each(function(i, el) { 
 
    gallery_holder_width += jQuery(el).width() + 2 /* padding-right */; 
 
}); 
 
jQuery('.gallery_holder').width(gallery_holder_width);
.country_holder { 
 
    position:relative; 
 
    margin-top:2rem; 
 
    margin-bottom:2rem; 
 
    width:70%; 
 
    left:18.5%; 
 
    display:block; 
 
    overflow-y:scroll; 
 
    overflow-x:hidden; 
 
    overflow:-moz-scrollbars-horizontal; 
 
    border:1px solid black; 
 
} 
 

 
.gallery_holder{ 
 
    width:4000px; 
 
    height:150px; 
 
    position:relative; 
 
    background-color:none; 
 
} 
 
.gallery_holder ul{ 
 
    padding: 0 
 
} 
 
.gallery_holder ul li.gallery_img{ 
 
    box-shadow: 0 0 5px rgba(0,0,0,0.2) inset; /* added just for display */ 
 
    padding-right:2px; 
 
    float:left; 
 
    display:inline-block; 
 
    vertical-align:top; 
 
    height:150px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="country_holder" id="c_scotland"> 
 
     <div class ="g_title" id="g_scotland"><h6>Scotland</h6></div> 
 
     <div class="gallery_holder"> 
 
     <ul> 
 
      <li class="gallery_img" style="width: 50px"></li> 
 
      <li class="gallery_img" style="width: 150px"></li> 
 
      <li class="gallery_img" style="width: 100px"></li> 
 
      <li class="gallery_img" style="width: 80px"></li> 
 
      <li class="gallery_img" style="width: 120px"></li> 
 
      <li class="gallery_img" style="width: 200px"></li> 
 
      <li class="gallery_img" style="width: 50px"></li> 
 
      <li class="gallery_img" style="width: 30px"></li> 
 
      <li class="gallery_img" style="width: 40px"></li> 
 
      <li class="gallery_img" style="width: 50px"></li> 
 
      <li class="gallery_img" style="width: 90px"></li> 
 
      <li class="gallery_img" style="width: 140px"></li> 
 
      <li class="gallery_img" style="width: 70px"></li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    </ul>

來源

2017-06-14 07:55:27

+0

感謝您的答覆 - 這看起來不錯，但我要用CSS版本運行。祝一切順利！ – Scott

相關問題

 相關問題