CSS卡左右浮动无法正常工作答案

【问题标题】：Css card float left and right not working correctlyCSS卡左右浮动无法正常工作
【发布时间】：2018-09-11 22:19:07
【问题描述】：

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

我正在使用左右浮动：

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

这是一个JSFIDDLE 示例

【问题讨论】：

您在描述您的问题时应该尽量清楚。不清楚你的意思。请解释为什么 完全出错。
我认为为了快速解决你可以在
标签结束后使用

标签： jquery html css

【解决方案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>

【讨论】：

【解决方案2】：

你能澄清一下到底出了什么问题吗？是不是因为DIV描述文字跑到了H4和P里？

如果是这样，扔一个“clear:both;”到 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%;
}

如果这不是问题所在，或许更详细地了解问题所在和期望内容会有所帮助。

【讨论】：