自动流动文本答案

【问题标题】：Autoflowing text自动流动文本
【发布时间】：2017-08-06 09:19:22
【问题描述】：

我目前正在开发一个自定义用户控件，以帮助显示事件报告的简要概要（使用 Bootstrap3）。控件显示如下：

我需要文字围绕图像向右流动。我尝试了一些关于'pull-left'和'pull-right'的变体，但没有什么能达到我想要的效果（我对html/css不是超级棒）。代码如下：

<div class="col-md-12">
    <div class="col-md-8">
        <h3>
            <asp:Label ID="lblDept" runat="server" />
            <br />
            <small>
                <asp:Label ID="lblTask" runat="server" />
            </small>
        </h3>
    </div>
    <div class="col-md-4">
        <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
            <asp:Image ID="imgIncident" runat="server" />
        </a>
    </div>
    <div class="col-md-12">
        <asp:Label ID="lblDesc" runat="server" CssClass="pull-left" />
    </div>
</div>

【问题讨论】：

您的意思是希望 lblDesc 内容围绕缩略图流动？具有 col-md-12 类的 div 将使其位于其他两个 div 之下，因为它有 12 列宽
是的，这就是我想用 lblDesc 做的事情。我们今天裁员了，所以 OP 比我通常喜欢的要匆忙一些。至于列布局，这只是现在的代码。我确实知道 col-md-12 类基本上确保了一个新的“行”。我已经尝试了一些关于控件所在位置的变体，但无法将它们完全融合在一起。

标签： css asp.net twitter-bootstrap-3

【解决方案1】：

我能够通过以下方式使文本自动流动：

<div class="col-md-12">
    <h3 class="col-md-8 pull-left">
        <asp:Label ID="lblDept" runat="server" />
        <br />
        <small>
            <asp:Label ID="lblTask" runat="server" />
        </small>
    </h3>
    <div class="col-md-4 pull-right">
        <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
            <asp:Image ID="imgIncident" runat="server" />
        </a>
    </div>        
    <asp:Label ID="lblDesc" runat="server" />
</div>

【讨论】：