小编ind*_*two的帖子

Flexbox:如何让divs填充100%的容器宽度而不包装?

我正在更新旧inline-block的网格模型,我需要更新我创建的Flexbox.一切都运行良好,除了一个小障碍,这已经成为一个破坏者:

我有一堆CSS控制的滑块; 所以有一个包含100%宽度的包装器,里面是另一个div:它的宽度也是100%,但它white-space被设置为nowrap.使用inline-block,这意味着内部div(设置为100%宽度)不受父母约束的限制并且包裹在下一行 - 它们只是继续流出盒子.这正是我想要的.但是,我无法使用flexbox来完成这项工作.供参考,这是一张图片:

Flexbox问题

作为参考,这里是使用内联块的jsFiddle:http://jsfiddle.net/5zzvqx4b/

... 而不使用Flexbox:http://jsfiddle.net/5zzvqx4b/1/

我已经试过各种变化与flex,flex-basis,flex-wrap,flex-grow,等,但对我的生活,我不能得到这个工作.

请注意,我可以通过设置.boxcontainer宽度来强制它以一种hacky,不灵活的方式执行我想要的操作200%.这适用于这个单独的例子,但在某些情况下我不会事先知道将有多少个子盒子,如果可能的话,我宁愿不在每个元素上使用内联样式.

css css3 flexbox

49
推荐指数
4
解决办法
9万
查看次数

CSS:使div宽度与高度成比例

这有点难以解释,但是:我想要一个响应高度div(height: 100%),它将缩放与高度成比例的宽度(反之亦然).

我知道这种方法利用padding-top黑客来使高度与宽度成正比,但我需要它以相反的方式工作.话虽如此,我并不是非常热衷于对该方法中内容的绝对定位元素的额外要求,所以我意识到我可能会在这里要求月球.

为了帮助可视化,这是一个图像:

期望效果的视觉表示

......这里是一个jsFiddle,说明了几乎相同的东西.

值得注意的是,我已经使用:before:after伪元素垂直对齐我想按比例缩放的框的内容.

我真的非常非常喜欢不必恢复到jQuery,只是因为调整大小处理程序的内在要求以及通常更多的调试...但如果这是我唯一的选择,那么命令.

html css scale css3

31
推荐指数
3
解决办法
4万
查看次数

WooCommerce:以编程方式使用可变产品创建订单

我正在尝试以编程方式创建订单。使用wc_create_order()它非常简单:

$myProduct = new WC_Product(100);
$order = wc_create_order();
$order->add_product($myProduct, 1);
$order->calculate_totals();
Run Code Online (Sandbox Code Playgroud)

这可以按预期工作,并为ID为100的简单产品创建了正确金额的订单。

但是,如果我尝试使用变体来执行此操作,则它似乎无法正确运行。经过反复试验,我可以通过这种方式进行工作:

$membershipProduct = new WC_Product_Variable(100);
$theMemberships = $membershipProduct->get_available_variations();

$trueProduct = new WC_Product(100);

$variationsArray = array();

foreach ($theMemberships as $membership) {
    if ($membership['sku'] == $chosenVariation) {
        $variationID = $membership['variation_id'];
        $variationsArray = $membership['attributes'];
    }
}

if ($variationID) {
    $trueProduct->variation_id = $variationID;
}

$order = wc_create_order();
$order->add_product($trueProduct, 1, $variationsArray);
$order->calculate_totals();
Run Code Online (Sandbox Code Playgroud)

但是,尽管它确实使用正确的产品和正确的变体ID创建了订单,但该订单的总数始终为0(巧合的是,第一个变体的价格)。

最初,我尝试$order->add_product()使用从创建的对象new WC_Product_Variable(),但这导致根本没有将任何产品添加到订单中,这使我相信这是通过编程方式使用可变产品创建订单的问题。但是,按照这些调用的WooCommerce源代码,我看不到我在做什么错。

是否缺少我想要的东西,或者用可变产品创建订单的更好方法?

php wordpress woocommerce

5
推荐指数
1
解决办法
5222
查看次数

Wordpress:"相关页面"或"关联页面"插件

有没有人知道Wordpress 现有的相关页面插件,特别是你可以自己手动分配"相关"页面的地方?

我可能正在搜索错误的东西或使用错误的术语,因为我发现的所有内容总是与相关的帖子有关,或者是基于标记或算法(例如YARPP),而我理想的是,我需要的是:

  • 您正在编辑一个页面,还有一个附加面板,其中包含其他页面的列表;
  • 您检查要与页面关联的所有其他页面;
  • 发布/更新页面,相应地保存关联.

如果有人知道这样的事情,请告诉我.

谢谢.

wordpress wordpress-plugin

4
推荐指数
1
解决办法
3469
查看次数

额外的行添加:使用HTML5 DTD后的伪元素(与XHTML1相比)

很长一段时间我一直在使用一个非常好的列跨越方法我偶然发现,其中我可以有一个带有类.boxcontainer和子.box元素的div ,并使用一个:after伪元素.boxcontainer,我的.box列在页面上对齐很好.以下是最重要的定义:

.boxcontainer {
    text-align:                 justify;
    -ms-text-justify:           distribute-all-lines;
    text-justify:               distribute-all-lines;
    background-color:             orange;
}

.boxcontainer:after {
    content:                    '';
    display:                    inline-block;
    width:                      100%;
    height:                     0px;
    font-size:                  0px;
    line-height:                0px;
}
Run Code Online (Sandbox Code Playgroud)

我之前的大多数项目都是XHTML1 Transitional(我后来学到了与其他DTD相比使用了有限的怪癖模式),并且在XHTML1中使用这种方法,父对象.boxcontainer总是完全包裹在子.box元素周围.

但是,在HTML5中处理一个新项目时,我发现在对齐.box元素下面似乎添加了一条额外的行.你可以在这里看到一个例子:http://jsfiddle.net/RZQTM/1/ - 点击小提琴选项并将DTD更改为其他任何内容,你会看到我的意思 - 一个橙色的'乐队'出现在合理的蓝盒子.

认为这归结为:after伪元素的呈现几乎就像是一个额外的内容,但我不知道如何解决它.任何有关如何移除框下额外空间的提示都将非常感激.

css xhtml html5 pseudo-element

0
推荐指数
1
解决办法
1222
查看次数