Question

我希望有一个按钮，它响应地留在一个段落旁边，没有段落文字环绕按钮。

例如，这是我正在使用的当前代码：

<div class="myclass">
    <a href="#" class="btn btn-primary btn-sm">Button</a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

这会产生以下结果：

[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
In vitae turpis porta, lobortis turpis in, pretium erat. Lorem 
ipsum dolor sit amet, consectetur adipiscing elit.

我想要的是以下内容：

[button] Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
         In vitae turpis porta, lobortis turpis in, pretium erat. Lorem 
         ipsum dolor sit amet, consectetur adipiscing elit.

无论屏幕分辨率如何，我希望它保持这种状态。

我将如何做到这一点？

Answer 1

您可以使用Bootstraps Media Object来执行此操作。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <div class="media">
    <div class="media-left"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
  <hr>
  <div class="media">
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="media-right media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <div class="media-right media-middle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
  </div>
  <hr>
  <div class="media">
    <div class="media-left media-midle"> <a href="#" class="btn btn-primary btn-sm">Button</a>

    </div>
    <div class="media-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </div>
</div>
<hr>

＆＃13;

Answer 2

尝试将按钮保留在不同的div中，将段落保留在另一个div中。

Answer 3

You tagged bootstrap so you can put the button and text in separate divs with column width settings. The number after the device width is divided by 12 for the width percentage. You can also add multiple device widths to improve responsiveness.

<div class="row myclass">
    <div class="col-xs-4">
        <a href="#" class="btn btn-primary btn-sm">Button</a>
    </div>
    <div class="col-xs-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
</div>

http://jsfiddle.net/zsenq6h6/

Answer 4

结束使用display：table和display table-cell。即：

HTML：

<div class="filters">
    <div class="cell">
        <a href="#">Button</a>
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus tempus ante sit amet hendrerit. Nunc vel nunc id nibh rhoncus posuere. Nunc tincidunt nisi nec diam lacinia commodo. Quisque erat nisi, vulputate eget lacinia finibus, aliquet quis est. Vivamus at risus egestas, interdum erat ut, condimentum dui.
    </div>
</div>

CSS：

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

Answer 5

bootstrap是实现此效果的最佳方式。如果您不想使用bootstrap，那么您可以使用以下代码。

html：

<div class="myclass">
    <a href="#" class="btn btn-primary btn-sm">Button</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae turpis porta, lobortis turpis in, pretium erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

css：

a {
    width:10%;
    display:inline-block;
    vertical-align:top;

}
p{
    width:70%;
    display:inline-block;

    margin-top:0 !important;
}
@media screen and (max-width:500px){
    a {
        margin-right:20px;
    }
}
}

http://jsfiddle.net/souraj/d0u61xpg/

当分辨率低于500px时，需要

媒体查询部分。否则无需使用它。

段落旁边的Bootstrap按钮（响应）

5 个答案: