内联-块元素没有内联

Question

很久没有做任何代码了，找不到为什么物品没有排好队。.weff nedacam-paignus中的所有元素都应该排成一行，每个元素并排排列。相反，每个下一篇文章都会被推到页面上。导致此问题的原因是什么？我可以使用表格来解决这个问题，但我很想知道为什么这个表不能工作，这样以后我就可以自己解决它了。

​

.weff-nedacam-paignus {
  background-color: #fff;
  float: left;
  border-radius: 1px;
  margin-right: 24px;
  margin-bottom: 24px;
  width: 22%;
  height: 288px;
}

user agent stylesheet div {
  display: inline-block;
  vertical-align: top;
}

.weff-text {
  margin-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  font-family: Tahoma, Arial;
  line-height: 16px;
  opacity: 0.8;
  margin-bottom: 15px;
  padding: 0 0px;
  height: 60px;
  overflow: hidden;
  text-align: justify;
}

.weff-img img {
  object-fit: cover;
  height: 200px;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0px 4px 15px rgba(183, 180, 180, 0.42), 0px 10px 30px -15px rgba(0, 0, 0, 0.45);
  border: 2px solid rgb(92, 92, 93);
}

.weff-img2 img {
  height: 200px;
  width: 140px;
  box-shadow: 0px 3px 10px #fff;
}

.weff-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 15px 0px 10px 0px;
}

.weff-title a {
  line-height: 1.3;
  word-wrap: break-word;
  color: #000;
  font-size: 15px;
  font-weight: normal;
}

.weff-title a:hover {
  color: #ddd;
}

.weff-detali {
  padding-left: 3px;
  margin-top: 5px;
  height: 23px;
  line-height: 17px;
  font-size: 13px;
  border-bottom: #736a6a 1px solid;
  padding-bottom: 12px;
}

.weff-detali li {
  list-style: none;
  margin-right: 15px;
  display: inline-block;
}

.weff-detali i {
  color: #fff;
  padding-right: 5px;
}

.weff-detali a {
  color: #fff;
  background-color: #000;
}

.weff-detali a:hover {
  color: #fff;
}

.tesanuladudsan {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.tesanuladudsan:hover {
  -webkit-filter: grayscale(100%);
}

@media screen and (max-width: 1220px) {
  .masakegen-nedacam-paignus {
    width: 100%;
    height: auto;
    padding: 10px;
  }
}

<div class="weff-nedacam-paignus">
  <div class="weff-title"><span class="xml-text"><a href="site url" target="_blank">$TITLE$</a></span></div>
  <div class="weff-img tesanuladudsan">
    <a href="site url" target="_blank" title="title"><img src="http://www.robothumb.com/src/?url=site url&size=190x120&alt=[title]"></a>
  </div>
  <div class="weff-detali">
    <li style=" float: right; margin-right: 2px; "><a href="cat">cat name  </a></li>
  </div>
  <div class="weff-text">msg</div>
</div>

​

Answer 1

到目前为止，这是我能做的最好的事情:/

​

<style>
 .weff-nedacam-paignus{
 background-color: #fff;
 display:inline-block;
 float:left;
 border-radius: 1px;
 margin-right: 24px;
 margin-bottom: 24px;
 width: 22%;
 height: 288px;
 vertical-align: bottom;
}

user agent stylesheet div{
display: inline-block;
}

.weff-text {
 margin-top: 5px;
 padding-left: 5px;
 padding-right: 5px;
 padding-bottom: 5px;
 font-size: 12px;
 font-family: Tahoma,Arial;
 line-height: 16px;
 opacity: 0.8;
 margin-bottom: 15px;
 padding: 0 0px;
 height: 60px;
 overflow: hidden;
 text-align: justify;
 display:inline-block;
}

.weff-img img{
object-fit: cover;
height: 200px;
width: 100%;
border-radius: 5px;
box-shadow: 0px 4px 15px rgba(183, 180, 180, 0.42), 0px 10px 30px -15px rgba(0, 0, 0, 0.45);
border: 2px solid rgb(92, 92, 93);
}

.weff-img2 img{
height: 200px;
width: 140px;
box-shadow: 0px 3px 10px #fff;
 display:inline-block;
}

.weff-title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding: 15px 0px 10px 0px;
}

.weff-title a{
line-height: 1.3;
word-wrap: break-word;
color: #000;
font-size: 15px;
font-weight: normal;
}

.weff-title a:hover{
color: #ddd;
 display:inline-block;
}

.weff-detali{
padding-left: 3px;
margin-top: 5px;
height: 23px;
line-height: 17px;
font-size: 13px;
border-bottom: #736a6a 1px solid;
padding-bottom: 12px;
}

.weff-detali li{
list-style: none;
margin-right: 15px;
display: inline-block;
}

.weff-detali i{
color: #fff;
padding-right: 5px;
}

.weff-detali a{
color: #fff;
background-color:#000;
}

.weff-detali a:hover{
color: #fff;
}

.tesanuladudsan{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.tesanuladudsan:hover{
-webkit-filter: grayscale(100%);
}

@media screen and (max-width: 1220px){ 
.masakegen-nedacam-paignus{ 
width: 100%; 
height: auto; 
padding: 10px; 
} 
}
</style>


<div class="weff-nedacam-paignus"> 
<div class="weff-title"><span class="xml-text"><a href="$SITE_DIRECT_URL$" target="_blank">$TITLE$</a></span></div>
 <div class="weff-img tesanuladudsan"><a href="$SITE_DIRECT_URL$" target="_blank" title="$TITLE$"><img src="http://www.robothumb.com/src/?url=$SITE_DIRECT_URL$&size=190x120&alt=[$TITLE$]"></a></div> 
<div class="weff-detali"> <li style=" float: right; margin-right: 2px; "><a href="$CATEGORY_URL$">$CATEGORY_NAME$ $SECTION_NAME$</a></li></div> 
<div class="weff-text">$MESSAGE$</div> 
</div>
<br>

​

Answer 2

你可以使用Flexbox，它将解决你的问题，而且它也是响应式的。

• 在weff-nedacam-paignus类中添加display:flex;：

所以在添加CSS之后会变成，

.weff-nedacam-paignus {
  background-color: #fff;
  float: left;
  border-radius: 1px;
  margin-right: 24px;
  margin-bottom: 24px;
  width: 22%;
  height: 288px;
  display:flex;
}

在这里，默认情况下，伸缩方向是逐行的，所以它会在右边添加元素，直到容器的宽度，然后包装down.If。要使元素垂直对齐，请在类中添加flex-direction:column;。

Answer 3

​

<body>
    
    
    <style>
 .weff-nedacam-paignus{
 background-color: #fff;
 float:left;
 border-radius: 1px;
 margin-right: 24px;
 margin-bottom: 24px;
 width: 22%;
 height: 288px;
}

user agent stylesheet div{
display: inline-block;
vertical-align: top;
}

.weff-text {
 margin-top: 5px;
 padding-left: 5px;
 padding-right: 5px;
 padding-bottom: 5px;
 font-size: 12px;
 font-family: Tahoma,Arial;
 line-height: 16px;
 opacity: 0.8;
 margin-bottom: 15px;
 padding: 0 0px;
 height: 60px;
 overflow: hidden;
 text-align: justify;
}

.weff-img img{
object-fit: cover;
height: 200px;
width: 100%;
border-radius: 5px;
box-shadow: 0px 4px 15px rgba(183, 180, 180, 0.42), 0px 10px 30px -15px rgba(0, 0, 0, 0.45);
border: 2px solid rgb(92, 92, 93);
}

.weff-img2 img{
height: 200px;
width: 140px;
box-shadow: 0px 3px 10px #fff;
}

.weff-title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
padding: 15px 0px 10px 0px;
}

.weff-title a{
line-height: 1.3;
word-wrap: break-word;
color: #000;
font-size: 15px;
font-weight: normal;
}

.weff-title a:hover{
color: #ddd;
}

.weff-detali{
padding-left: 3px;
margin-top: 5px;
height: 23px;
line-height: 17px;
font-size: 13px;
border-bottom: #736a6a 1px solid;
padding-bottom: 12px;
}

.weff-detali li{
list-style: none;
margin-right: 15px;
display: inline-block;
}

.weff-detali i{
color: #fff;
padding-right: 5px;
}

.weff-detali a{
color: #fff;
background-color:#000;
}

.weff-detali a:hover{
color: #fff;
}

.tesanuladudsan{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.tesanuladudsan:hover{
-webkit-filter: grayscale(100%);
}

@media screen and (max-width: 1220px){ 
.masakegen-nedacam-paignus{ 
width: 100%; 
height: auto; 
padding: 10px; 
} 
}
</style>


<div class="weff-nedacam-paignus" style="
    display: inline-block;
    width: 100%;
"> 
<div class="weff-title" style="
    display: inline-block;
    vertical-align: bottom;
"><span class="xml-text"><a href="site url" target="_blank">$TITLE$</a></span></div>
 <div class="weff-img tesanuladudsan" style="
    display: inline-block;
    vertical-align: middle;
"><a href="site url" target="_blank" title="title"><img src="http://www.robothumb.com/src/?url=site url&amp;size=190x120&amp;alt=[title]"></a></div> 
<div class="weff-detali" style="
    display: inline-block;
    vertical-align: bottom;
"> <li style=" float: right; margin-right: 2px; "><a href="cat">cat name  </a></li></div> 
<div class="weff-text" style="
    display: inline-block;
    vertical-align: bottom;
    height: auto;
">msg</div> 
</div>
    <script type="text/javascript">
        
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div>
    <script type="text/javascript">
        
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div>
    <script type="text/javascript">
        
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div></body>

​

这是因为你使用了<div>和div标签，默认的样式是display: block;，而display: block;意味着整个部分的宽度，这样他们就不会让另一个兄弟继续使用它们，所以就像你说的，你需要表格单元格或内联块。我建议你使用inline-block bcaz，这里的结构是inline-block。