内部<p>的图像分隔符文本

Question

我正在尝试构建一个简单的RPG形式和东西，但这是我的问题：http://gyazo.com/ed68206c6bcf37609a8700c981919ad9

我需要图像（黑框）上的文本"围绕"图像，但是，由于图像位于不同的"层次结构"上，因此它似乎不起作用：

<div class="panel panel-default">
    ///Here's de image
    <div class="panel-title" style="width:200px; height:200px; background-color: black; float:left; margin:20px">
    </div>
    <div class="panel-body" style="margin-left: 200px; position">
        <ul class="nav nav-tabs" style="height:40px">
            <li class="active"><a href="#pHistoriaDiv" data-toggle="tab" aria-expanded="true">Historia</a>
            </li>
            <li class=""><a href="#pPersonaDiv" data-toggle="tab" aria-expanded="false">Personalidade</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="pHistoriaDiv" class="tab-pane fade active in">
                <h4></h4>
                //here is the <p> with the text to go around
                <p id="pHistoria" style="margin-left:5px; overflow: hidden;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </p>
            </div>
            <div id="pPersonaDiv" class="tab-pane fade active in">
                <h4></h4>
                <p id="pPersona" style="margin-left:5px; overflow: hidden;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </p>
            </div>
        </div>
    </div>
</div>

由于我使用的是引导程序，因此发布 CSS 毫无用处，因为它太大了，但我很乐意使用你们需要帮助的任何东西进行编辑。

有什么线索吗？？谢谢！

Answer 1

问题是图像出现在单独的div 中，并且由于引导，文本不会自然地环绕图像。

我已将图像/黑框移动到您的div，现在文本应该环绕在您的图像周围。

    /// Here is the nav panel
    <div class="panel-body" style="margin-left: 200px;">
        <ul class="nav nav-tabs" style="height:40px">
            <li class="active"><a href="#pHistoriaDiv" data-toggle="tab" aria-expanded="true">Historia</a>
            </li>
            <li class=""><a href="#pPersonaDiv" data-toggle="tab" aria-expanded="false">Personalidade</a>
            </li>
        </ul>
    /// Here is the Historia Tab
        <div class="tab-content">
            <div id="pHistoriaDiv" class="tab-pane fade active in">
        ///Here's the image - aligns to the left with the text wrapping around
        <div class="panel-title" style="width:200px; height:200px; background-color: black; float:left; margin:20px"></div>
                //here is the <p> with the text to go around
                <p id="pHistoria" style="margin-left:5px; overflow: hidden;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </p>
            </div>

            <div id="pPersonaDiv" class="tab-pane fade active in">
                <h4></h4>
                <p id="pPersona" style="margin-left:5px; overflow: hidden;">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                </p>
            </div>
        </div>
    </div>
</div>