HTML的div标签不工作单独的div影像指定

的计划是设置每个黄色图像下方的LinkedIn图标中心。这里是代码：

<div class="contentEditableContainer contentGmapEditable" style="min-height: 0px;"> 

    <div class="contentEditable"> 

<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<br> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;">                    </div>                      </div>

的问题是，我试图创造这些单独的部门，如：

<div class="col-md-12"> 
    <div class="col-md-2"> 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
                <br> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
               </div> 
<div class="col-md-2"> 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
                <br> 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
               </div> 
               </div>

在我想它应该创建两个图像分开的div和<br>应该允许linkedin图标在黄色下方。它不工作，它，而造成这样的：

我这么想吗？

来源

2016-10-03 Faizan Shah

，如果你打算使用引导程序，那么你应该创建两行一列将包含LinkedIn的图像和其他将包含黄色图片 –

试一试像这样

.d1{ 
 
    float:left; 
 
} 
 
.d2{ 
 
    float:right; 
 
} 
 
.li{ 
 
    text-align:center; 
 
}

<div class="col-md-12"> 
 
    <div class="col-md-2 d1"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
     <div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d1"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d1"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d2"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div>      
 
<div class="col-md-2 d2"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div> 
 
<div class="col-md-2 d2"> 
 
    <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
 
                <br> 
 
<div class="li"> 
 
<img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px; text-align:center;"> 
 
     </div> 
 
               </div>             
 
               </div>

来源

2016-10-03 07:17:01

尝试在中心对齐图像，并使用display:inline-block; OR float:left左对齐div，

<div class="col-md-12" style="display:inline-block;"> 
    <div class="col-md-2" style="text-align: center;"> 
     <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
     <br> 
     <img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
    </div> 
    <div class="col-md-2" style="text-align: center;"> 
     <img data-default="placeholder" src="images/placeholder_2.jpg" width="75" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
     <br> 
     <img data-default="placeholder" src="images/linkedin.png" width="35" style="padding:2px;border:1px solid #dbdeec;border-radius:3px;-webkit-border-radius:3px;"> 
    </div> 
</div>

来源

2016-10-03 07:10:13 Developer

所以，我已经把上面的图像一行2列中的每个并在图像中的另一个链接行，也有2列。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="row text-center"> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
<div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 
    <img src="http://placehold.it/75x75" alt=""> 
 
    </div> 
 
</div> 
 

 
<div class="row text-center"> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
<div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
    <div class="col-md-2 col-sm-2 col-xs-2"> 
 

 
    <img src="http://placehold.it/35x35" alt=""> 
 
    </div> 
 
</div>

你需要把你自己的图片在那里，这只是占位符。玩的开心！

来源

2016-10-03 07:11:19 RasmusGlenvig

HTML的div标签不工作单独的div影像指定

回答

相关问题