如何在引导程序或 css 中将按钮行和内容留在图像中答案

【问题标题】：How to place button row and content left to image in bootstrap or css如何在引导程序或 css 中将按钮行和内容留在图像中
【发布时间】：2015-07-02 16:49:14
【问题描述】：

产品详情页面应在图片右侧包含带有标签和按钮的行以及表格。

使用了 Bootstap 3，此页面出现在 bootstrap 列中。我试过了

<div class="maincontent">

<!-- Image in left -->

    <div class="details-gallery hidden-xs">
        <a class="bigimg fbox">
            <img alt="" id="detail-mainimage" />
        </a>
    </div>

    <div class='inline-block'>

<!-- row with labels and buttons -->
<form>
<label for="spinner">
                quantity
            </label>
            <input id="spinner" class='amount '/>
             <label for='total_eur'>Sum</label>
            <span class='maincontent-paymentsum' id="total_eur"></span>
            <input type="submit" value="Add to cart" class="btn btn-success" />
    <input type="button" class="btn btn-primary " onclick="javascript: history.back(1)"
           value='Back' />
</form>
    </div>
   ...
   <!-- table which should be right to image -->
    <table class="table table-hover table-condensed table-responsive inline-block">

但按钮行出现在底部，表格在其后开始。

如何解决这个问题，让内容出现在图片的右侧？

如何将按钮行和表格正确放置在这个问题的第一张图片中？这是 Mono ASP.NET MVC3 应用程序。

【问题讨论】：

标签： jquery html css asp.net twitter-bootstrap

【解决方案1】：

我会从您的代码中删除 .inline-block 类，并将 float:left 设置为 details-gallery hidden-xs 类。然后你需要额外的包装器在一个容器中包含整个右侧的布局（div.inline-blocktable.table-responsive 和div.details-productdescription），即。 div.product-info-wrapper, 并将float 也发送给left。您可能还需要在此元素上使用 width: calc(100% - 270px);。

如果不清楚，请告诉我。

【讨论】：

我在没有float:left 的情况下实现了这个并更新了测试网址。为什么需要向左浮动？如何用更通用的东西替换魔法值270px？
您的设置有效，但是如果您将鼠标悬停在 chrome 开发人员工具中的 div.product-info-wrapper 上，您会看到如果不浮动它，此元素会跨越整个宽度，这是不正确的。您需要进行的一项更正是将 calc() 函数添加到表中，而不是添加到 div.product-info-wrapper 本身。 270px 在这里不是一个神奇的值 - 而只是布局左侧的宽度，所以要告诉右侧元素，填充剩余的可用空间，您需要使用 calc(100% - 270px) 函数。浏览器支持 calc() 函数 - caniuse
我将 calc 移至 .product-info-wrapper { width: calc(100% - 270px); } 在这种情况下，表格出现在图片下方，如相关图片中所示。所以这必须是表格样式
这就是为什么你需要在div.product-info-wrapper 上使用float:left ;)

【解决方案2】：

在图像的 div 上应用“float:left”

   <div style="float:left" class="details-gallery hidden-xs">
    <a class="bigimg fbox">
        <img alt="" id="detail-mainimage" />
    </a>
   </div>

并减少表格的宽度：

<table style="width:350px" class="table table-hover table-condensed table-responsive inline-block">

应该这样做

【讨论】：