Question

使用Post Type Builder，我创建了一个名为Concerts的CPT。在我的服务器上干净地安装主题时，我产生了这个结果正确的结果：https://plushdesign.net/plush8/concert/deck-the-hall/

每个组件都设置在父div中的唯一div中，并且它们都应该浮动到照片的右侧。 div都被设置为向左浮动。

当我将CPT / css移到开发网站时，同样的css会显示：http://spiderman.ephronsystems.com/concert/san-francisco-symphony-presents-deck-the-hall/

如何让紫色按钮在细节下方浮动，并将文本包裹在其下方（它不会环绕照片，这是所需的行为）。我尝试了清除和显示属性的每个组合，但它非常顽固。

以下是相关的html：

div class="ptb_items_wrapper entry-content" itemtype="http://schema.org/Article" itemscope="">
<div class="ptb_first_row ptb_row ptb_concert_row ">
<div class="ptb_col ptb_col1-1 ptb_col_first">
<div class="ptb_module ptb_thumbnail ptb_module_inline">
<div class="title ptb_module ptb_title">
<div class="details ptb_module ptb_text ptb_details">
<div class="purchasetickets ptb_module ptb_text ptb_purchase_tickets">
<div class="description ptb_module ptb_text ptb_description">
</div>
</div>

以下是相关的css：

div.ptb_items_wrapper.entry-content {float:left;overflow:auto;padding-top:2em;border-top:1px solid #ededed;}
div.ptb_module.ptb_thumbnail.ptb_module_inline {float:left;margin-right: 1em;}
div.title.ptb_module.ptb_title {float:left;}
div.details.ptb_module.ptb_text.ptb_details {float:left;/*margin-right: 200px;*/}

div.purchasetickets.ptb_module.ptb_text.ptb_purchase_tickets {float:left;color:#fff !important;}
.purchasetickets { padding: 6px 16px; background: #872c8c;margin:3px 0 12px !important;border-radius: 1.2em;font-size: 14px;text-transform: uppercase;letter-spacing: 2px;color:#fff !important;}
a.purchasetickets, .ptb_purchase_tickets a {color:#fff !important;}
.purchasetickets:hover {opacity:.5;}

div.description.ptb_module.ptb_text.ptb_description {float:left;}

谢谢！

Answer 1

这是新的CSS：

div.ptb_items_wrapper.entry-content {float:left;overflow:auto;padding-top:2em;border-top:1px solid #ededed;}
div.ptb_module.ptb_thumbnail.ptb_module_inline {float:left;margin-right: 1em;}
div.title.ptb_module.ptb_title {}
div.details.ptb_module.ptb_text.ptb_details {/*margin-right: 200px;*/}

div.purchasetickets.ptb_module.ptb_text.ptb_purchase_tickets {color:#fff !important;display: inline-block;}
    .purchasetickets { padding: 6px 16px; background: #872c8c;margin:3px 0 12px !important;border-radius: 1.2em;font-size: 14px;text-transform: uppercase;letter-spacing: 2px;color:#fff !important;}
    a.purchasetickets, .ptb_purchase_tickets a {color:#fff !important;}
    .purchasetickets:hover {opacity:.5;}

div.description.ptb_module.ptb_text.ptb_description {float:left;}

摘要更改：

仅浮动图像
在按钮上应用display: inline-block。

另外，为了帮助他人，请在@Andrei Gheorghiu提到的问题中添加适当的标签。：）

漂浮物没有堆叠在彼此之下

1 个答案: