Когда максимизируется, почему существует разрыв строки после слова "и"?

Спасибо за прочтение.

Переписано, чтобы быть более ясным - извините за всю путаницу.

Пожалуйста, используйте ЭТО jsFiddle: http://jsfiddle.net/Ghr8L/5/

Это для этого кода:

<div>

 <div>
 
 Bookkeeping & Business Services: Proven. Reliable. Accurate.
 Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.
 </div>

 <div>(310) 204-4717</div>

</div>

Все работает именно так, как нужно, за исключением этого:

  1. Разверните окно (или панель результатов) настолько, насколько это возможно.
  2. После слова "и" происходит разрыв строки, хотя между содержимым и номером телефона имеется тонна пробела.
  3. Зачем?

Я подозреваю, что это связано с шириной изображения, поскольку он работает так, как ожидалось, если вы вынимаете изображение, но я не узнал, что.

Благодарю!

Обновление: это действительно изображение без учета ширины div.

При дальнейшем изучении этой проблемы я нашел этот вопрос: плавающее изображение не учитывает ширину DIV, как я могу это сделать? , Это точно не решает, но объясняет это.

Я, наконец, закончил с чем-то похожим на предложение AJP.

Окончательная версия находится здесь: http://jsfiddle.net/Ghr8L/18/

Мне очень хотелось бы, чтобы текст обернулся вокруг изображения, когда ширина сужается, но прикрутите его - я думаю, у вас не может быть всего. По крайней мере, не менее чем через миллион часов. = О)

5 ответов

попробуй это.

<div><code>


 
 <div>
 Bookkeeping & Business Services: Proven. Reliable. Accurate.
 Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.
</div>

<div>(310) 204-4717</div>
</code>


 <p> обновленный ответ:</p> <pre class="prettyprint linenums"> <div>

 <div>
 
 Bookkeeping & Business Services: Proven. Reliable. Accurate.
 Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.
</div>

<div>(310) 204-4717</div>

</div>


У вас есть две проблемы: во-первых, у вас есть теги, которые устанавливают точное количество текста, которое будет отображаться на линии. Вам нужно удалить их.

Но как только вы это сделаете, текст займет столько места, сколько может, и нажмите номер телефона ниже. Следующее, что вам нужно сделать, это установить ширину на div, содержащем изображение и текст. Попробуйте 60% и играйте с ним оттуда.

Более полным, надежным решением будет использование сетчатой системы: http://css-tricks.com/dont-overthink-it-grids/


использование display: inline-block и гибкая ширина являются возможным решением.

http://jsfiddle.net/Ghr8L/13/


почему не ширина: 100% в родительском div?,

<div> <p> <a href="http://jsfiddle.net/wx7ft/rel=nofollow" rel="nofollow noreferrer" target="_blank">http://jsfiddle.net/wx7ft/</a></p> <p> или, может быть, я неправильно понял ваш вопрос?</p> </div>


Я думаю, вам просто нужно удалить из текста:

<div>

 <div>
 
 Bookkeeping & Business Services: Proven. Reliable. Accurate.
 Hassle-Free bookkeeping with No B.S. - Give us a chance and we'll prove it.
 </div>

 <div>(310) 204-4717</div>

</div>

licensed under cc by-sa 3.0 with attribution.