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影像指定

回答

相關問題