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;你pn的CSS类，你的项目应在提交正确

来源

2016-03-02 18:18:42 iSkore

我试过了，但现在看起来像http://prnt.sc/aacsg3我已更新最新的HTML问题 – user580950

你想要所有这些从左到右？ – iSkore

只有2 http://prnt.sc/aaculc – user580950

HTML-Css在div右边添加列

回答

相关问题