Текст не переполняет плавающий div

Я застрял в одной из самых простых вещей когда-либо ... Я не вижу, что не так, и почему текст моего абзаца не переполнит контейнер кнопки (расположен в нижнем правом углу обертки).Текст не переполняет плавающий div

JS Fiddle ссылка здесь: http://jsfiddle.net/8q7cexL9/1/

код, чтобы пойти с ним: HTML

<div class="what-wrapper"> 
    <div class="what-box"> 
     <h1>What we do</h1> 
     <p class="what-text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
     </p> 
     <p class="what-text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit. 
     </p> 
     <div class="button">Explore our facilities</div> 
    </div> 
</div>

CSS

.what-box { 
    border: 1px solid #ededed; 
    padding: 3%; 
    width: 80%; 
    position: relative; 
    margin: 0 auto; 
    border-radius: 15px; 
    overflow: auto; 
} 

h1 { 
    font-size:30px; 
    color:red; 
} 

p.what-text { 
    font-size: 13px; 
    padding: 1% 0; 
} 

.button { 
    font-size: 20px; 
    color: #00396F; 
    border: 1px solid; 
    border-radius: 5px; 
    padding: 2%;  
    float: right; 
}

Спасибо за любую помощь, Е.

е : Поскольку это не кажется достаточно очевидны: enter image description here

Это то, к чему я стремился.

источник

2014-11-27 Entalpia

Итак, что вы хотите переполнить? Текст в кнопке? Кнопка в блоке .what или в тексте внутри самого окна. –

Мой хрустальный шар говорит мне, что [это] (http://jsfiddle.net/webtiki/8q7cexL9/4/) - это то, что вам нужно. –

Возможный дубликат http://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div - это говорит о том, что это возможно только с помощью javascript – Rhumborl

Надеюсь, это то, что вам нужно.

position: absolute;

вместо

position: relative;

в .Что коробке. Вот ссылка http://jsfiddle.net/8q7cexL9/1/

источник

2014-11-27 13:56:25

Я смотрел на это но тогда, конечно, он начинает перекрываться, когда текст длиннее. – Rhumborl

Нет, он не будет вести себя так. вы можете проверить это по этой ссылке http://jsfiddle.net/8q7cexL9/1/ –

Вы можете расположить текст и изображения в этом формате

text text text ------------ 
text text text | button | 
text text text |   | 
text text text ------------ 
text text text text text text 
text ...

Это хорошее форматирование. Для этого вы можете проверить

http://jsfiddle.net/swapnilmotewar/4adprz48/

источник

2014-11-27 14:11:20

Но я не хочу, чтобы это было устроено таким образом ... Я действительно сказал, что я хочу, чтобы кнопка была в нижнем правом углу и я хочу, чтобы текст абзаца переполнял его с левой стороны. – Entalpia

плавающий элемент, как правило, сделать обтекание текста вокруг него, только тогда, когда текст появляется после перемещаемого элемента. В вашем случае текст не обтекает div (с классом кнопки), потому что этот div появляется после текста в метке вверх.

Если вы отредактируете свою метку, чтобы сделать элемент с плавающей точкой перед текстом, это решит вашу проблему. Например: если вы просто переместите кнопку div перед вторым абзацем, это даст вам желаемое поведение.

Не изменяйте ни один из ваших стилей. Просто отредактируйте отметку следующим образом. И это решит проблему.

<div class="what-wrapper"> 
    <div class="what-box"> 
     <h1>What we do</h1> 
     <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quiss nosstrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute r in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
     <div class="button">Explore our facilities</div> 
     <p class="what-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore mauis aute r in enderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. gna aliqua. Ut enim ad minim veniam, quiss nosst eu fugiat nulla parruduis aute r in reprehen eu arderit in voluptate velit.</p> 
    </div> 
</div>

источник

2014-11-27 20:19:42 Vik

Текст не переполняет плавающий div

ответ

Смежные вопросы