将图像对齐为div

时间：2017-09-04 15:01:43

标签： html css

以下是website

的样子

这是代码

＆＃13;
＆＃13; 
div#main-pic {
    padding: 7px 7px 0;
}
.content_res div.bigleft {
	float: left;
	margin-top: 20px;
	width: 40%; /*240px*/
	background-color: #EFEFEF;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
}

div#thumbs-pic {
    padding: 7px;
}

img{
  max-width: 100%;
  height: auto;
}

a.post-gallery img {
    vertical-align: middle;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
}
＆＃13; 
<div class="bigleft">
   <div id="main-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" class="img-main cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL"><img class="img-responsive" src="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" title="1492443192175" alt="1492443192175"></a>
      <div class="clr"></div>
   </div>
   <div id="thumbs-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-480x800.jpg" id="thumb1" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 1"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-200x200.jpg" alt="IMG_9691" title="IMG_9691" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-600x800.jpg" id="thumb2" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 2"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-200x200.jpg" alt="IMG_9694" title="IMG_9694" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-600x800.jpg" id="thumb3" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 3"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-200x200.jpg" alt="IMG_9690" title="IMG_9690" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-600x800.jpg" id="thumb4" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 4"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-200x200.jpg" alt="IMG_9692" title="IMG_9692" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-600x800.jpg" id="thumb5" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 5"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-200x200.jpg" alt="IMG_9685" title="IMG_9685" width="200" height="200"></a>
      <div class="clr"></div>
   </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我想做的是两件事：

  • 删除图片的灰色容器。我无法在inspect元素
    • 中找到它
  • 我不想触摸#main-pic，我只想将#thumbs-pic所有main-pic缩略图与img{ max-width: 100%; height: auto; } a.post-gallery img { vertical-align: middle; margin-right: 5px; -webkit-border-radius: 3px; border-radius: 3px; width: 100%; } 水平对齐

enter image description here

我知道如果我删除

display-block

问题的一半将被解决，我只是不知道如何解决另一半问题。我尝试stock=np.genfromtxt('c:/09012017.txt',delimiter=' ',dtype=str,skip_header=1) 这样的东西，无法得到确切的结果

2 个答案:

答案 0 :(得分：2)

这是一个解决方案。首先在display:flex上设置div#thumbs-pic。在此flexbox内部分配图像或flex项目适当的宽度（我使用82px）。灰色背景位于.content_res div.bigleft。我将其更改为透明并使用！important声明来确保它不会在其他地方被覆盖。 html没有变化。这是完整的代码段：

＆＃13;
＆＃13; 
div#main-pic {
    padding: 7px 7px 0;
}
.content_res div.bigleft {
	float: left;
	margin-top: 20px;
	width: 40%; /*240px*/
	background-color: transparent !important;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
}

div#thumbs-pic {
    padding: 7px;
    display:flex
}

div#thumbs-pic img {
  width:84px;
}

img{
  max-width: 100%;
  height: auto;
}

a.post-gallery img {
    vertical-align: middle;
    margin-right: 5px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    width: 100%;
}
＆＃13; 
<div class="bigleft">
   <div id="main-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" class="img-main cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL"><img class="img-responsive" src="http://www.jokerleb.com/wp-content/uploads/2017/05/809926-440x800.jpeg" title="1492443192175" alt="1492443192175"></a>
      <div class="clr"></div>
   </div>
   <div id="thumbs-pic">
      <a href="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-480x800.jpg" id="thumb1" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 1"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/462104-200x200.jpg" alt="IMG_9691" title="IMG_9691" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-600x800.jpg" id="thumb2" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 2"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/808110-200x200.jpg" alt="IMG_9694" title="IMG_9694" width="200" height="200" style="opacity: 1;"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-600x800.jpg" id="thumb3" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 3"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/876022-200x200.jpg" alt="IMG_9690" title="IMG_9690" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-600x800.jpg" id="thumb4" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 4"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/823734-200x200.jpg" alt="IMG_9692" title="IMG_9692" width="200" height="200"></a><a href="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-600x800.jpg" id="thumb5" class="post-gallery cboxElement" data-rel="colorbox" title="Apartment For Sale in JBEIL - Image 5"><img src="http://www.jokerleb.com/wp-content/uploads/2017/05/246168-200x200.jpg" alt="IMG_9685" title="IMG_9685" width="200" height="200"></a>
      <div class="clr"></div>
   </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

我会这样做：

<div id="allimagesholder">
    <div id="mainpic">
        <a href=">
            <img src="">
        </a>
    </div>
    <div id="thumbpiccontainer">
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
        <div class="thumbpiccontainer"><a href="><img src="" ></a></div>
    </div>
</div>

<style>
#allimagesholder {
    height:300px;
    width:27.4em;
    background-color:white;
}
#mainpic {
    display:inline-block;
    position:relative;
    width:100%;
    height:200px;
    background-color:black;
    margin: 0.1em;
}
.thumbpiccontainer {
    height:3em;
    width: 3em;
    background-color:black;
    margin: 0.1em;
    display:inline-block;
}
.thumbpiccontainer img {

    height:3em;
    width: 3em;
    background-color:black;
    margin: 0.1em;
}
</style>
相关问题
最新问题