CSS Выноски отклоняются с обеих сторон неправильно

Я пытаюсь использовать CSS для создания выносок в блоке текста (для таких вещей, как кавычки или соответствующие изображения). Его нужно манипулировать с помощью Javascript и работать с CMS, поэтому я не могу просто вставлять выноску в середине текстового блока и плавать. Вместо этого выноски расположены в верхней части текстового блока, и я использую div-толкатель определенной высоты, чтобы переместить его в нужное место.CSS Выноски отклоняются с обеих сторон неправильно

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

Вот пример проблемы. Разделители толкача (обычно толщиной 0px и прозрачные) - это красные полосы сбоку. Оба они должны начинаться в верхней части блока, прямо под заголовком. Как вы можете видеть (по крайней мере, если вы используете Webkite/Gecko, я еще ничего не пробовал), панель справа начинается под панелью слева.

http://keaton.ws/Files/theCalloutProblem.html

Я пытался играть с структурой HTML (с толкателем и выноски из их родительского DIV) и изменяя отображения свойства почти все, и ничего не работает. Большинство изменений, которые я делаю, приводят к тому, что текст не обертывается должным образом. Я знаю, что это довольно неясная проблема, но любая помощь будет очень признательна.

-Keaton

Вот код, со стилями инлайн:

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
     <div style="width:750px; margin:0 auto;"> 
      <div style="width:750px;text-align:center;"><h1>This is the header</h1></div> 
      <!-- Left Callout --> 
      <div> 
       <div style="width:0px;float:left;height:100px;"></div> 
       <div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div> 
      </div> 
      <!-- Right Callout --> 
      <div> 
       <div style="width:0px;float:right;height:250px;"></div> 
       <div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div> 
      </div> 
      <div style="width:700px; margin: 0 auto;"> 
       <!-- Body Text --> 
      </div> 
     </div> 
    </body> 
</html>

источник

2012-06-20 Keaton Brandt

В этих примерах, чередующиеся левый/правый поплавки всегда имеют одинаковую высоту.

http://meyerweb.com/eric/css/edge/slantastic/holiday.html http://meyerweb.com/eric/css/edge/slantastic/demo2.html (< --why это ссылка unclickable?) http://csstextwrap.com/#export

Похоже, что у вас есть для сортировки поплавки по высоте/положении, чтобы достичь желаемого эффекта:

http://jsfiddle.net/ge5YG/2/

источник

2012-06-20 20:21:11 biziclop

Ooh, да, это работает! Мне нужно сделать мой Javascript немного более сложным, но я полагаю, если бы было легко, кто-то уже сделал бы это. Благодаря! –

CSS Выноски отклоняются с обеих сторон неправильно

ответ

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