HTML-Css Добавление столбца справа от div

Я пытаюсь добавить некоторые столбцы в существующий столбец и строку в HTML и CSS.HTML-Css Добавление столбца справа от div

Я попытался скопировать <div id=" gallery">, как это, но его добавление столбца ниже существующего столбца

То, что я пытаюсь сделать это

Мой существующий код, который я написал,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Slideshow</title> 
    <style type="text/css"> 
    body{margin: 0;padding: 0;font: 100% Verdana, Arial, Helvetica, sans-serif;font-size: 14px;} 
    div#gallery{border: 1px #ccc solid;width: 150px;margin: 40px auto;text-align: center;} 
    div#gallery img{margin: 20px;border: 2px #004694 solid;} 
    div#gallery p{color: #004694;} 
    div#gallery div.pn{padding: 10px;margin: 0 5px;border-top: 1px #ccc solid;float: left;} 
    a{color:#333;} 
    a:hover{color:#cc0000;} 
    a.sp{padding-right: 40px;} 
    </style> 
</head> 
<body> 
    <div id="gallery"> 
    <div class="pn" > 
      </div> 
     <img src="56b0f76cf20f0_thumb900.jpg" width="100" alt="" /> 
     <p>test</p> 
     <div class="pn"> 
      <img src="56b0f76cf20f0_thumb900.jpg" width="100" alt="" /> 
     </div> 
    </div>. 
    <div id="gallery"> 
    <div class="pn" > 
      </div> 
     <img src="56b0f76cf20f0_thumb900.jpg" width="100" alt="" /> 
     <p>test</p> 
     <div class="pn"> 
      <img src="56b0f76cf20f0_thumb900.jpg" width="100" alt="" /> 
     </div> 
    </div>. 

</body> 
</html>

источник

2016-03-02 user580950

see it on codepen

<div id="gallery"> 
    <div class="pn"> 
     <img src="http://placehold.it/100x350"> 
     </div> 

     <div class="pn"> 
      <img src="http://placehold.it/100x350"> 
     </div> 
    <div class="pn"> 
      <img src="http://placehold.it/100x350"> 
     </div> 
    </div>

вот CSS

body{margin: 0;padding: 0;font: 100% Verdana, Arial, Helvetica, sans-serif;font-size: 14px;} 
    div#gallery{border: 1px #ccc solid;margin: 40px auto;text-align: center;} 
    div#gallery img{margin: 20px;border: 2px #004694 solid;} 
    div#gallery p{color: #004694;} 
    div#gallery div.pn{padding: 10px;border-top: 1px #ccc solid; display:inline-block;width:33%;box-sizing:border-box} 
    a{color:#333;} 
    a:hover{color:#cc0000;} 
    a.sp{padding-right: 40px;}

попытка TGE выше ссылке. посмотрите, работает ли это для вас. вы можете использовать тот же подход. держите свои изображения на 100% ширину вместо абсолютного размера пикселя

источник

2016-03-02 18:34:50 user3589690

Если добавить float: left; в CSS из ваших pn класс, ваши пункты должны подать в правильно

источник

2016-03-02 18:18:42 iSkore

Я попытался, но теперь это выглядит как http://prnt.sc/aacsg3. Я обновил последний html в вопросе – user580950

И вы хотите, чтобы все это продолжалось влево-вправо? – iSkore

только 2 http://prnt.sc/aaculc – user580950

HTML-Css Добавление столбца справа от div

ответ

Смежные вопросы