1. 首页
  2. 问答
  3. 将div调整为包含图像的宽度

将div调整为包含图像的宽度

2017-06-14 31 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

相关问题

 相关问题