Question

这是我正在使用的编码。我已经搞乱了几个小时。以下是我正在使用的CSS

<ul class="slider">
  <li style="display: block;">
    <a href="#" style="clear:both;>
       <div class="slider_blog" style="width: 680px; height: 300px; display: block; clear: both; float: left;">
         <div class="slider_blog_img">
           <img src="#" alt="#">
         </div>
         <div class="slider_blog_text" style="float:left;">
           <h2>This is A Title</h2>
           <p></p>
           <p>words</p>
        </div>
      </div>
    </a>
  </li>
</ul>

这是我正在使用的CSS

.slider li {
  display: none, block;
  position: absolute; 
  top: 0; 
  left: 0; 
  list-style: none;
  padding:0;
  margin:0px;
  width:680px;
  height:300px;
}

.slider li:after{
  clear:both;
}

.slider_blog{
  border: 1px solid #F0E; clear: both; padding: 0; margin: 0;
}

.slider_blog a{
 text-decoration: none; padding: 0; margin: 0;
}

.slider_blog_img{
  width:300px;
  height:300px;
}

.slider_blog img{
  width: 200px; height: 200px; margin:50px; border: none; display:block;
}

.slider_blog_text{
 width: 280px; padding: 50px 20px 50px 0px; border:none;
}

.slider_blog_text h2{
 text-align:center; font-size:24px; font-weight:bold; color:red; 
}

.slider_blog_text p{
  text-align:justify; font-size:14px; color:green;
}

我知道他们是添加了CSS的一些内联内容，但是当我“虽然”我正在取得进展时，这是从Firebug复制的。谢谢你的帮助。

Answer 1

您的第一个<a>标记缺少结束样式引用。首先尝试修复，然后更好地解释问题。另外，请尝试向float:left类添加.slider_blog_img并暂时删除设置的宽度和高度。

Answer 2

按TJohnW所指示的那样做，即

提供最终报价

<a href="#" style="clear:both;">

并使用此

.slider_blog_img {
    float: left;
}

<强> output

如何让2个div在一个div里面的div内浮动，彼此相邻

2 个答案: