jquery - Css 卡左右浮动无法正常工作

Question

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

我正在使用左右浮动:

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

这是一个JSFIDDLE例子

Answer 1

给你，你所要做的就是将这两个放在容器内的 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>