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

时间：2017-06-14 07:38:42

标签： css resize

所以我正在创建一个从左到右滚动的画廊。我想要做的是让div保持图像调整大小到图像的组合宽度，这样你就不能滚动到最终图像到虚无。目前我有一个固定的宽度。用inline-block替换它不起作用（可能因为.country_holder的70％宽度强制阻塞行为？）这是我当前的代码：

    <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;
}

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：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>

相关问题
最新问题