Question

我用css制作了一张卡片，但是我想要左边的公司名称和右边的销售百分比。我也有一个可以崩溃和扩展的div。因此，当我点击div时，它应该展开，但是当我点击它时，它完全出错了。我真的不知道如何解决这个问题。

我左右使用浮动：

.card h4 {
   float: left;
}
.card p {
   float: left;
}

这是一个JSFIDDLE示例

Answer 1

你能澄清什么是错的吗？是不是因为DIV描述文本正在进入H4和P？

如果是这样，抛出一个“清楚：两个;”在DIV描述中应该将它设置在自己的行上。

如果你想把它们作为三列，你应该将DIV移动到H4和P之间。然后，设置一些％宽度和正确的显示（不要把“display：block;”放在上面DIV，但是“display：inline-block;”）。

div.container div { 
  padding-bottom: 20px;
  margin-left: 5%;
  width: 50%;
  margin-right: 5%;
  margin-top: 1.33em;
  display:inline-block;
} 

.card h4 {
  float:left;
  width: 20%;
}

.card p {
  float:right;
  width: 20%;
}

如果这不是问题，也许更多细节可以解决什么是错的，什么是有用的。

Answer 2

在这里，你要做的就是将这两个放在容器中的div中，并放置在下面扩展的div。

$(function() {
  $('.container').click(function() {
    $(this).find('.expand').slideToggle();
  });
});

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 85%;
  border-radius: 5px;
  margin: 0 auto;
  font-size: 13.5px;
  font-family: 'Varela Round', sans-serif;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card img {
  border-radius: 5px 5px 0 0;
}

.card .container {
  padding: 2px 16px;
  background-color: #E91818;
}

div.container div {
  display: none;
  padding-bottom: 20px;
}

.title {}

.card h4 {
  display: inline;
}

.price {
  display: inline;
  float: right;
}


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <img src="https://dummyimage.com/1200" alt="Avatar" style="width:100%">
  <div class="container">
    <span class="title">
  <h4 class="company">company name</h4>
  <span class="price">price</span>
    </span>
    <div class="expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

Css卡浮动左右不能正常工作

2 个答案: