在div的两侧围绕文本

问题描述

这是我尝试实现的：

使用以下 HTML ：

 < div id =my1> 
< p>一些文字< / p> 
< div id =wrap>真棒内容< / div> 
< / div> 
  

有这个：

 文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本div id =wrap文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  

浮动 divs 没有帮助我达到这个结果到目前为止...（考虑到高度和宽度为my1和wrap是已知的）

一个小提琴，其中文字从右侧开始包装的div，当我希望它从my1div的左边开始，打破wrapdiv。
- 。

Here is what I try to achieve:

With the following HTML:

<div id="my1">
<p> some text </p>
<div id="wrap">Awesome content</div>
</div>

Having this:

text text text text text text text text text text text text text text
text text text text text div id="wrap" text text text text text
text text text text text text text text text text text text text text

Floating divs didn't help me reaching this result so far... (considering height and width for both my1 and wrap are known)?

A fiddle where the text starts from the right side of the wrapped div, when I wish it starts from the left of "my1" div, breaks around "wrap" div.http://jsfiddle.net/matmat/dxV4X/

解决方案

Looks like you want something like float:center ? Well, the problem is that this property doesn't exist.

Here are 2 alternatives:

1) Fake it with pseudo elements - FIDDLE - See this css-tricks article

Set up markup like so:

<div>
    <div id="wrap">Awesome content</div>
    <div id="l">
        <p>left text here</p>
    </div>
    <div id="r">
        <p>right text here</p>
    </div>
</div>

With CSS

#wrap {
    width:250px;
    height: 250px;
    background: yellow;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
}
#l {
    float: left;
}
#r {
    float: right;
}
#l, #r {
    width: 49%;
}
#l:before, #r:before {
    content:"";
    width: 125px;
    height: 250px;
}
#l:before {
    float: right;
}
#r:before {
    float: left;
}

Alternative #2 (IE 10+ only): CSS Exclusions - FIDDLE

Markup

<div class="container">
    <div class="exclusion">Awesome content which floats in the center</div>
    <div class="dummy_text">all the text here</div>
</div>

CSS

.container {
    font-size: small;
    background: aqua;
    position: relative;
}
.exclusion {
    background-color: lime;
    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    z-index: 1;
    position:absolute;
    left:0;right:0;
    top:0;bottom:0;
    width: 150px;
    height: 100px;
    background: yellow;
    margin: auto;
}

For more info about CSS exclusion browser support and further resources see my answer here.

这篇关于在div的两侧围绕文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！