Question

我正在尝试构建一个简单的rpg表单和内容，但这是我的问题： http://gyazo.com/ed68206c6bcf37609a8700c981919ad9

我需要图片上的文字（黑匣子）＆＃34;周围＆＃34;但是，由于图像位于不同的层次结构中，它似乎无法正常工作：

<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>

由于我使用bootstrap，我发布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>

<p> </p>中的图像中断文本

1 个答案: