两个 div 和浮动按钮

Question

我试图让 2 divs（一个具有自适应大小）并排显示，第三个将浮动在内容底部第一列的下方，但是我有浮动问题 div 显示在它应该显示的位置。

这就是我想要的样子：

这是我的代码：

.header {
  width: 100%;
  display: table
}

.header-text {
  display: table-cell; 
  vertical-align: top;
}

.cart-pos {
  display: table-cell; 
  float: none;
  padding-right: 5px;
  margin-left: 35px;
  margin-bottom: 10px;
  width: 36.5%;
  clear: both;
  min-width: 200px;
}

.cart-pos img {
  margin: 19px 0 15px 15px;
}

.ui-accordion-header .accordion-button, .ui-accordion-header .accordion-button-active {
  background-color: #5fa0d8;
    color: #fff;
    padding: 8px;
    width: 150px;
    text-align: center;
    margin-top: 10px;
    float: left;
}

.ui-accordion-header-active .accordion-button-active {
    display: block !important;
    background-color: #3570af;
}

<div class="header">

<div class="header-text"><h3>Product Name</h3>

<h4>Subheader text</h4>
<p>Lorem ipsum dolor sit amet, ei meliore volumus legendos ius, quis homero eu quo. Duo democritum consectetuer comprehensam ne, minim docendi quaerendum eam in. Decore docendi ex eam, cu iisque lucilius inciderint mea. No sed illud everti. Eros utroque an usu, mel noster nostrud detraxit at, cu sed veniam mollis omittam.</p></div>

<div class="cart-pos">
<div><a class="colorbox init-colorbox-processed cboxElement" href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt="alt text"></a></div>
<p><a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; margin: 0px 4% 0 0; padding: 10px 0;" href="http://www.webpage.co.uk"><strong>SUBSCRIBE</strong></a>

<a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; padding: 10px 0;" href="http://webpage.co.uk"><strong>PURCHASE</strong></a></p>
</div>

<div class="accordion-button">Find out More ▸</div><div style="display: none;" class="accordion-button-active">Less ▾</div>

</div>

请记住 HTML 的顺序很重要，因为它需要在较小的视口中以正确的顺序显示：

Answer 1

您需要在 p 标签后更改 Find out More 的位置

.header {
  width: 100%;
  display: table
}

.header-text {
  display: table-cell; 
  vertical-align: top;
}

.cart-pos {
  display: table-cell; 
  float: none;
  padding-right: 5px;
  margin-left: 35px;
  margin-bottom: 10px;
  width: 36.5%;
  clear: both;
  min-width: 200px;
}

.cart-pos img {
  margin: 19px 0 15px 15px;
}

.ui-accordion-header .accordion-button, .ui-accordion-header .accordion-button-active {
  background-color: #5fa0d8;
    color: #fff;
    padding: 8px;
    width: 150px;
    text-align: center;
    margin-top: 10px;
    float: left;
}

.ui-accordion-header-active .accordion-button-active {
    display: block !important;
    background-color: #3570af;
}

<div class="header">

<div class="header-text"><h3>Product Name</h3>

<h4>Subheader text</h4>
<p>Lorem ipsum dolor sit amet, ei meliore volumus legendos ius, quis homero eu quo. Duo democritum consectetuer comprehensam ne, minim docendi quaerendum eam in. Decore docendi ex eam, cu iisque lucilius inciderint mea. No sed illud everti. Eros utroque an usu, mel noster nostrud detraxit at, cu sed veniam mollis omittam.</p><div class="accordion-button">Find out More ▸</div></div>

<div class="cart-pos">
<div><a class="colorbox init-colorbox-processed cboxElement" href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt="alt text"></a></div>
<p><a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; margin: 0px 4% 0 0; padding: 10px 0;" href="http://www.webpage.co.uk"><strong>SUBSCRIBE</strong></a>

<a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; padding: 10px 0;" href="http://webpage.co.uk"><strong>PURCHASE</strong></a></p>
</div>

<div style="display: none;" class="accordion-button-active">Less ▾</div>

</div>

Answer 2

希望对您有所帮助。只需使用 display:flex。这将有很大帮助，有助于避免浮动。

.header {
  width: 100%;
  display: flex;
}

.header-text {
  flex: 0 0 50%;
}

.cart-pos {
  flex: 0 0 50%;
  padding-left: 35px;
  margin-bottom: 10px;
}

.cart-pos img {
  margin: 0 0 15px;
  width: 100%;
}

.ui-accordion-header .accordion-button, .ui-accordion-header .accordion-button-active {
  background-color: #5fa0d8;
    color: #fff;
    padding: 8px;
    width: 150px;
    text-align: center;
    margin-top: 10px;
    float: left;
}

.ui-accordion-header-active .accordion-button-active {
    display: block !important;
    background-color: #3570af;
}

.btn-group {
display: flex;
justify-content: space-between;
}

<div class="header">

<div class="header-text"><h3>Product Name</h3>

<h4>Subheader text</h4>
<p>Lorem ipsum dolor sit amet, ei meliore volumus legendos ius, quis homero eu quo. Duo democritum consectetuer comprehensam ne, minim docendi quaerendum eam in. Decore docendi ex eam, cu iisque lucilius inciderint mea. No sed illud everti. Eros utroque an usu, mel noster nostrud detraxit at, cu sed veniam mollis omittam.</p>
<div class="accordion-button">Find out More ▸</div>
</div>

<div class="cart-pos">
<div><a class="colorbox init-colorbox-processed cboxElement" href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt="alt text"></a></div>
<div class="btn-group"><a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; margin: 0px 4% 0 0; padding: 10px 0;" href="http://www.webpage.co.uk"><strong>SUBSCRIBE</strong></a>

<a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; padding: 10px 0;" href="http://webpage.co.uk"><strong>PURCHASE</strong></a></div>
</div>

<div style="display: none;" class="accordion-button-active">Less ▾</div>

</div>

Answer 3

您需要添加这个..它只适用于桌面网站..不适用于移动网站

.accordion-button {
        position: absolute;
        left: 11px;
    }

.accordion-button {
 position: absolute;
 left: 11px;
}
.header {
  width: 100%;
  display: table
}

.header-text {
  display: table-cell; 
  vertical-align: top;
}

.cart-pos {
  display: table-cell; 
  float: none;
  padding-right: 5px;
  margin-left: 35px;
  margin-bottom: 10px;
  width: 36.5%;
  clear: both;
  min-width: 200px;
}

.cart-pos img {
  margin: 19px 0 15px 15px;
}

.ui-accordion-header .accordion-button, .ui-accordion-header .accordion-button-active {
  background-color: #5fa0d8;
    color: #fff;
    padding: 8px;
    width: 150px;
    text-align: center;
    margin-top: 10px;
    float: left;
}

.ui-accordion-header-active .accordion-button-active {
    display: block !important;
    background-color: #3570af;
}

<div class="header">

<div class="header-text"><h3>Product Name</h3>

<h4>Subheader text</h4>
<p>Lorem ipsum dolor sit amet, ei meliore volumus legendos ius, quis homero eu quo. Duo democritum consectetuer comprehensam ne, minim docendi quaerendum eam in. Decore docendi ex eam, cu iisque lucilius inciderint mea. No sed illud everti. Eros utroque an usu, mel noster nostrud detraxit at, cu sed veniam mollis omittam.</p></div>

<div class="cart-pos">
<div><a class="colorbox init-colorbox-processed cboxElement" href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt="alt text"></a></div>
<p><a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; margin: 0px 4% 0 0; padding: 10px 0;" href="http://www.webpage.co.uk"><strong>SUBSCRIBE</strong></a>

<a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; padding: 10px 0;" href="http://webpage.co.uk"><strong>PURCHASE</strong></a></p>
</div>

<div class="accordion-button">Find out More ▸</div><div style="display: none;" class="accordion-button-active">Less ▾</div>

</div>

Answer 4

您也可以在 header

中使用 display:table-cell

   .header {
  width: 100%;
  display: table-cell;
}

.header-text {
  display: table-cell; 
  vertical-align: top;
}

.cart-pos {
  display: table-cell; 
  float: none;
  padding-right: 5px;
  margin-left: 35px;
  margin-bottom: 10px;
  width: 36.5%;
  clear: both;
  min-width: 200px;
}

.cart-pos img {
  margin: 19px 0 15px 15px;
}

.ui-accordion-header .accordion-button, .ui-accordion-header .accordion-button-active {
  background-color: #5fa0d8;
    color: #fff;
    padding: 8px;
    width: 150px;
    text-align: center;
    margin-top: 10px;
    float: left;
}

.ui-accordion-header-active .accordion-button-active {
    display: block !important;
    background-color: #3570af;
}

<div class="header">

<div class="header-text"><h3>Product Name</h3>

<h4>Subheader text</h4>
<p>Lorem ipsum dolor sit amet, ei meliore volumus legendos ius, quis homero eu quo. Duo democritum consectetuer comprehensam ne, minim docendi quaerendum eam in. Decore docendi ex eam, cu iisque lucilius inciderint mea. No sed illud everti. Eros utroque an usu, mel noster nostrud detraxit at, cu sed veniam mollis omittam.</p></div>

<div class="cart-pos">
<div><a class="colorbox init-colorbox-processed cboxElement" href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt="alt text"></a></div>
<p><a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; margin: 0px 4% 0 0; padding: 10px 0;" href="http://www.webpage.co.uk"><strong>SUBSCRIBE</strong></a>

<a style="display: block; width: 46%; text-align: center; border: 2px solid #5fa0d8; float: left; padding: 10px 0;" href="http://webpage.co.uk"><strong>PURCHASE</strong></a></p>
</div>

<div class="accordion-button">Find out More ▸</div><div style="display: none;" class="accordion-button-active">Less ▾</div>

</div>

Answer 5

从可访问性的角度来看，作为一般规则，最好让标签保持真实，这就是为什么我使用按钮而不是样式化 <a> 标签的原因。

我使用了 flex-box 来为您处理比例和位置。我已经将宽度限制为 800 像素，如果它永远扩展，用户将难以阅读它。

这是我的 Fiddle 的 link，如果你想玩代码。

/* banner is the whole banner */
.banner {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  max-width: 900px;
  margin: 0 auto;
  border: 0px #888 solid;
  border-width: 4px 0;
  padding: 0 15px;
}

/* content is the left hand side */
.banner .content {
  padding-right: 25px;
}

.banner .content h2 {
  color: #5fa0d8;
}

.banner .content h4 {
  color: #444;
}

.banner .content p {
  color: #888;
}

.banner .content button {
  padding: 10px 15px;
  margin: 5px 0 10px 0;
  background: #5fa0d8;
  border: solid #5fa0d8 1px;
  border-radius: 2px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

/* options is the right hand side */
.banner .options {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner .options .buttons {
  display: flex;
  justify-content: space-between;
}

.banner .options .buttons button {
  flex: 1;
  text-transform: uppercase;
  padding: 10px;
  background: #fff;
  border: solid #5fa0d8 1px;
  border-radius: 1px;
  font-weight: bold;
  color: #5fa0d8;
  max-width: calc(50% - 3px);
  cursor: pointer;
}

<div class="banner">
  <div class="content">
    <h2>Product Name</h2>
    <h4>Subheader text</h4>
    <p>
      Lorem ipsum dolor sit amet, ei meliore volumus legendos ius, quis homero eu quo. Duo democritum consectetuer comprehensam ne, minim docendi quaerendum eam in. Decore docendi ex eam, cu iisque lucilius inciderint mea. No sed illud everti. Eros utroque an usu, mel noster nostrud detraxit at, cu sed veniam mollis omittam.
    </p>
    <button class="accordian">Find out More ></button>
  </div>
  <div class="options">
    <a href="http://via.placeholder.com/350x150">
      <img src="http://via.placeholder.com/350x150" alt="alt text">
    </a>
    <div class="buttons">
      <button>subscribe</button>
      <button>purchace</button>
    </div>
  </div>
</div>

Answer 6

谢谢你们的建议，但是 none 这些解决方案将按我需要的方式工作。

相反，我按照你们中的某些人的建议在

标签下添加了手风琴按钮（在此之前我已经知道了，但没有这样做，因为它会导致较小视口的堆叠问题).

我还添加了另一组手风琴按钮（带有类手风琴按钮 accordion-button-mob 和 accordion-button-active accordion-button-active-mob）我希望它们出现在小视口的底部，根据屏幕分辨率使用 css 显示/隐藏。

这个解决方案并不完美，但它确实有效。

两个 div 和浮动按钮

Two divs and floated button

html

css

css-tables