两个div和浮动按钮

时间：2018-04-24 09:42:37

标签： html css css-tables

我正在尝试制作2个div（一个具有自适应大小）显示侧面大小，第三个将浮动在内容底部的第一列下方，但是我遇到浮动div显示问题的问题应该。

这就是我想要的样子：

enter image description here

这是我的代码：

.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的顺序很重要，因为它需要在较小的视口中以正确的顺序显示：

6 个答案:

答案 0 :(得分：0)

您需要在Find out More代码

之后更改p的位置

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我希望这会帮助你。只需使用display:flex即可。这将有很大帮助，有助于避免花车。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您需要添加此功能..它仅适用于桌面网站..不在移动网站

.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;
}

＆＃13;
＆＃13; 
<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>
＆＃13; 
active
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

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

我使用了flex-box来处理比例和位置。我将宽度限制为800px，如果它永远扩展，用户就很难阅读它。

以下是我Fiddle的链接，以防您想要使用该代码。

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

感谢您的建议，但这些解决方案都不会像我需要的那样工作。

相反，我已经按照你们的一些建议添加了

标签下的手风琴按钮（我之前已经知道了这一点，但没有这样做，因为它导致了较小视口的堆叠问题）。

我还添加了另一套手风琴按钮（带有手风琴按钮手风琴按钮 - 按键和手风琴按钮 - 活动手风琴 - 按钮 - 主动 - 按键的类别）我希望它们出现在底部小视口，使用css显示/隐藏，具体取决于屏幕分辨率。

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

答案 5 :(得分：-1)

您还可以在标题

中使用display:table-cell

＆＃13;
＆＃13; 
   .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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题