Question

我无法弄清楚如何使用固定宽度的图像内联浮动div（填充文本和其他div）。我尝试了很多选项，但我不能让第二个div浮动内联。

如何让'sidebbar-post-col2'与'featured-media'图像div一起浮动？

提前致谢

http://codepen.io/coreysimons/pen/waQEBE

CODE

.post-container {
  width:40%;
  display:inline-block;
  height:auto;
  overflow:hidden;
}
  
  .post {
    height:auto;
}


.sidebar-posts .featured-media {
  width:auto;
  display:block;
}

.sidebar-posts .featured-media img {
    max-width: 90px;
 max-height: 90px;
margin-right:20px;
  overflow: hidden;
}


.sidebbar-post-col2 {
  float:left;
  width:auto;
  display:inline-block;
}

.entry_author_image {
    display: inline-block;
}

.author-meta {
    font-size: 12px;
    letter-spacing: .5px;
    font-weight: normal;
    margin: 0px;
    display: inline-block;
    padding: 0px;
    float: none;
    color: #333;
    vertical-align: top;
    text-decoration: underline;
}

.author_location {
    padding: 0px;
    text-transform: none;
    font-size: 12px;
    color: #999;
    font-weight: normal;
    letter-spacing: .5px;
    display: inline-block;
    float: none;
    vertical-align: top;
    text-decoration: none;
}


.sidebar-posts .post-header h2.post-title {
    text-align: left;
    font-family: 'Roboto';
    font-weight: 900;
    font-size: 1.1em;
    line-height: 25px;
    letter-spacing: 0;
    padding-bottom: 10px;
}
.sidebar-posts .category-meta {
text-align:left;
color:#000;
margin-bottom: 5px;
margin-top:0px;
}

.sidebar-posts .post-submeta {
    text-align: left;
    float: none;
    margin-bottom: 24px;
    margin-left: 0;
    border-bottom: 1px solid #aaa;
    padding-bottom: 24px;
}


.sidebar-posts .post-header {
vertical-align: top;
padding:0;

}

<div class="post-container sidebar-posts"> 
  
  
<div class="post">
  
<div class="featured-media">
<a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo lookbook from Kenzo">
<img width="433" height="558" src="http://coreysimons.com/placeholder/placeholder-img-1.png" class="attachment-post-thumbnail wp-post-image" alt="Screen Shot 2015-07-28 at 22.45.13" /></a>
</div> <!-- /featured-media -->
			
<div class="sidebbar-post-col2">
  
<div class="post-header">
<div class="category-meta"><a href="#" rel="category tag">Feature</a>, <a href="#" rel="category tag">sidebar</a></div>
<h2 class="post-title"><a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo">Crazy new GIF lookbook from Kenzo lookbook from Kenzo</a></h2>
</div><!-- /post-header -->
  
<div class="post-submeta">
<div class="entry_author_image"><img src="http://coreysimons.com/placeholder/profile-image.png" alt="Corey Simons" width="16" height="16" /></div>
<div class="author-meta"><a href="#" title="Posts by Corey Simons" rel="author">Corey Simons</a></div>
<div class="author_location">Los Angeles</div>
</div><!-- /post-submeta -->
  
</div><!-- /sidebar-post-col2 -->
<div class="clear"></div>
<div class="spacer" style="clear: both;"></div>
  
</div><!-- /post -->
  
  <div class="post">
  
<div class="featured-media">
<a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo lookbook from Kenzo">
<img width="433" height="558" src="http://coreysimons.com/placeholder/placeholder-img-1.png" class="attachment-post-thumbnail wp-post-image" alt="Screen Shot 2015-07-28 at 22.45.13" /></a>
</div> <!-- /featured-media -->
			
<div class="sidebbar-post-col2">
  
<div class="post-header">
<div class="category-meta"><a href="#" rel="category tag">Feature</a>, <a href="#" rel="category tag">sidebar</a></div>
<h2 class="post-title"><a href="#" rel="bookmark" title="Crazy new GIF lookbook from Kenzo">Crazy new GIF lookbook from Kenzo lookbook from Kenzo</a></h2>
</div><!-- /post-header -->
  
<div class="post-submeta">
<div class="entry_author_image"><a href="#" rel="bookmark" title="‘Wasted Youth’ at Thinkspace Gallery"><img src="http://coreysimons.com/placeholder/profile-image.png" alt="Corey Simons" width="16" height="16" /></a></div>
<div class="author-meta"><a href="#" title="Posts by Corey Simons" rel="author">Corey Simons</a></div>
<div class="author_location">Los Angeles</div>
</div><!-- /post-submeta -->
  
</div><!-- /sidebar-post-col2 -->
<div class="clear"></div>
<div class="spacer" style="clear: both;"></div>
  
</div><!-- /post -->
  
  
</div><!-- /post-container -->

Answer 1

好的，你必须做一些事情：

1）在.sidebbar-post-col2上取下浮球。您还需要为此div添加pixel或percentage宽度。必须指定这一点，以便inline-block能够正常工作，我为{我的例子}做了50%。

2）然后在.sidebar-posts .featured-media上我添加了vertical-align: top;以及将display:block更改为display:inline-block

编辑：

在此处查看我的最新 JSfiddle：

https://jsfiddle.net/d239roug/2/

基本上我做的是：

1）.post课程我添加了display:table

2）在.sidebar-posts .featured-media和.sidebbar-post-col2上，我添加了display:table-cell

对此的解释是display:table-cell根据display:table父DIV内部内容的宽度占用多少来均匀分配空间。

浮动流体文本div与图像div

1 个答案: