Question

我正在开设一个网页，以便从彼此相邻的电子书中获取封面照片。在每张照片下面有两个按钮。看图。我使用一个div作为容器，然后我使用<li>，因为我会有更多的书。此页面位于流畅的网站上。

<div id="ebooks_container">

<li> 
  <div id="ebook_single"><img src="cover1.jpg">
  <div id="download_btn">         
  <a href="eBooks_ENG/eBook1.epub">DOWNLOAD</a>
</div>
    <div id="review_btn"><a class="inline" href="#data2">REVIEW</a>
</div>
</div>
</li>

我无法获取图像下方的按钮，当我复制此代码并将其粘贴到此下时，下一个电子书单个div显示在第一个下面。我希望他们彼此相邻。

希望有人可以帮助我。我知道一点CSS3，但我是一个业余爱好者：）

这就是我想要做的事情：

Answer 1

看起来你刚刚开始。我会尝试找到一个在线视频资源，以帮助您学习像lynda或树屋。（我可以插入这些网站名称吗？我也不是赞助商。）

我对你要找的内容进行了粗略的布局。这可能有所帮助。

更新：此代码影响您当前代码的原因是因为这些样式正在应用于您的所有＆＃39; UL＆＃39; LI＆＃39; LI＆＃39;标签。你需要制作这个＆＃39; UL＆＃39;通过向其添加类来获得唯一性。我更新代码以表明你的意思。

HTML

<ul class="book_covers clearfix">

    <li>
        <div>Image Panel</div>
        <a class="btn1" href="#">Button1</a>
        <a class="btn2" href="#">Button2</a>
    </li>
    <li>
        <div>Image Panel</div>
        <a class="btn1" href="#">Button 1</a>
        <a class="btn2" href="#">Button2</a>
    </li>

</ul>

CSS

*{
    box-sizing: border-box;
}
.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.book_covers { 
    list-style-type: none;
    width: 100%;
    height: 500px;
    background: #333;
    padding: 0px;
    margin: 0px;
}
.book_covers li {
    width: 50%;
    height: 100%;
    background: yellow;
    display:inline-block;
    float:left;
    border: 2px solid #000;
}
.book_covers li div{
    width: 90%;
    height: 70%;
    padding:0px;
    margin: 5%;
    background: blue;
    border:2px solid #000;

}
.book_covers li .btn1,
ul li .btn2{
    width: 42.5%;
    height: 22.5%;
    padding: 0;
    float: left;
    border:2px solid #000;
    text-decoration: none;
    color: #fff;
    text-align: center;
}
.book_covers li .btn1{
    margin:0 2.5% 5% 5%;
    background: orange;
}
.book_covers li .btn2{
    margin:0 5% 5% 2.5%;
    background: pink;
}

Here is the updated fiddle!

Answer 2

未经测试但应该正常工作

<style>
ul{
   list-style-type: none;
}
ul li{
    border:5px solid #ccc;
    background:#ccc;
    width:260px;
    height:400px;
    margin-right:4px;
    float:left;
}
li div{
  width: 100%;
  height:90%;
  background:#dedede;
}
li span{
  display: inline-block;
  width: 40%;
  height: 5%;
  background:#fff;
  padding:8px;
    border:5px solid #ccc;
    float:left;
}
</style>

<ul>
    <li>
        <div>image</div>
        <span>Download</span>
        <span>Review</span>
    </li>
    <li>
        <div>image</div>
        <span>Download</span>
        <span>Review</span>
    </li>
</ul>

Answer 3

您的代码可能类似于：

<强> HTML

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/javascript'>
      @import main.css;
    </style>
  </head>
<body>
  <div id='cnt1'>
    <img id='img1' src='cover1.jpg' />
    <a href='eBooks_ENG/eBook1.epub' class='btns' id='dwn'>DOWNLOAD</a>
    <a href='#data2' class='btns' id='rev'>REVIEW</a>
  </div>
  <div name='data2' id='data2'>Your data here</div>
</body>
</html>

main.css 可能类似于：

#cnt1{
  height:320px; width:300px; position:relative;
}
#img1{
  display:block; height:300px; width:300px;
}
.btns{
   display:block; height:20px; width:150px; text-align:center; float:left;
}

Answer 4

@magnetwd 感谢您查看我的问题。我上传了一个重复的网站，这是页面[link]（http://hoddenbagh.nl/test_bibleopen/subjects_eBooks.html） NAV酒吧不再好了。并且照片下的影子Gif也没有。可能所有这些都与新的CSS有关。

要进行比较，这是原始网站。 NAV酒吧和照片阴影都很好。 [link]（http://hoddenbagh.nl/bibleopen/index.html）

P.S。我在样式上做的并不多，按钮仍然是基本的。

如何在div中排列3个div

4 个答案: