Обтекание текста вокруг правого плавающего столбца, где левый столбец появляется первым в HTML - PullRequest
Новая
       3

Обтекание текста вокруг правого плавающего столбца, где левый столбец появляется первым в HTML

7 голосов
/ 18 апреля 2011 
------------------------
h1

tab1 tab2 tab3
------------------------
text text  | photo
text text  | photo              
text text  | photo          
text text  | photo          
text text  | photo          
text text  |           
text text text text text                    
text text text text text

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

Учитывая возможность (кто действительно знает, но яя не собираюсь рисковать) потери рейтинга страницы из-за того, что текстовое содержание находится ниже на странице, как я могу достичь того же результата с левым столбцом перед правым в html?

вопрос к вебмастерам

Ответы [ 5 ]

3 голосов
/ 20 апреля 2011

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

ЕСЛИ так, следующий пример скрипки может быть опцией,если нет, то я не думаю, что это возможно без сохранения изображений первыми в источнике.

ЕСЛИ так, это означает, что сначала нужно вставить один пустой div в источнике, указав размеры, соответствующие изображениям / слайд-шоуи поместите его прямо в качестве "заполнителя" .. затем добавьте положение относительно основной области содержимого и поместите фактические изображения / слайд-шоу поверх заполнителя:

пример скрипта: ЗДЕСЬ

полный код согласно комментариям:

HTML: 

<div id="wrapper">
  <div id="header"><h1>Header</h1></div>
    <div id="tabs">Tabs</div>

    <div id="main">
      <div id="ssholder"></div>

        <div id="left">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure dolor in reprehenderit in voluptate velit
            esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
        <p> add loads more content!</p>
    </div>

    <div id="sshow">
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
       <img src="" alt="" width="200px" height="50px" />
    </div>

    </div>
</div>

CSS: 

#wrapper {
  width: 600px;
  border: 1px solid #000;
}

#main { 
  position: relative; 
  border: 1px solid red;
}        

#ssholder {
  float: right; 
  width: 200px; 
  height: 300px;
}

#sshow {
  position: absolute; 
  width: 200px; 
  height: 300px; 
  top: 0; 
  right: 0; 
  background: #eee;
}

#sshow img {
  display: block;
}

jQuery для определения высоты, если явно не установлено значение #sshow: 

$(function() {
    var sshowHeight = $('#sshow').height();
    $('#ssholder').height(sshowHeight);
});
1 голос
/ 25 апреля 2011

Почему бы не написать свой HTML таким образом, чтобы весь текст находился перед всеми изображениями. Что-то вроде: 

<div id="MainWrapper">
        <div id="LeftFloatedText">
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
            <p>text text text</p>
        <div>
        <div id="LeftFloatedImages">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
            <img src="http://placekitten.com/150/150">
        </div>
    </div>
1 голос
/ 21 апреля 2011

Если вы не знаете ширину и высоту элемента изображения

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

  1. Служить HTML с текстом перед изображением.
  2. Используя Javascript, переместите изображение перед текстом.
  3. Использованиепростой float: right; для позиционирования изображения.

Таким образом, вы не потеряете рейтинг страницы (поисковая система увидит правильный HTML), и у пользователей будет нужный макет.

javascript будет таким же простым, как 

var image = document.bodocument.getElementById('imageContainer')
var text = document.getElementById('textContainer')
text.parentNode.insertBefore(image, text)

Если ширина и высота всегда одинаковы

Мы можем довольно легко подделать его с помощью CSS, используя pseudo-element

#wrapper{
    position: relative;
}
#textContainer:before {
    content: '';
    display: block;
    width: 200px;
    height: 200px;
    float: right;
    margin: 0 0 1em 1em;
}
#imageContainer{
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}

Здесь мы создаем поддельный элемент 200x200 перед textContainer и используем его, чтобы сэкономить место для imageContainer, который мы поместили, используя абсолютное позиционирование.Для абсолютного позиционирования вам понадобится оболочка div для вашего textContainer и ImageContainer с position: relative;

1 голос
/ 20 апреля 2011

Обновлено:

Я переместил изображение div после текста div.Если размер изображения динамический, вы можете использовать jQuery для его динамической установки

jsFiddle link

1 голос
/ 18 апреля 2011

Это работает с IE6 на.Float это left и установите width к нему.Ваша боковая часть получает значение margin-left, которое должно быть таким же, как и общая ширина плавающей части (позаботьтесь о полях, границах и отступах, поскольку они тоже учитываются в общей ширине).

JSfiddle: http://jsfiddle.net/easwee/reXaT/1/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .content {width:800px;margin:0 auto;background:#ccc;}
    .content-text {float:left;width:500px;background:green;}
    .content-sidebar {margin-left:500px;background:red;}
.clear {clear:both;height:1px;line-height:1px;font-size:1px;}
    </style>
</head>
<body>
<div class="content">
<h1>Winrar text</h1>
    <div class="content-text">
    Texte
    </div>
    <div class="content-sidebar">
    asdfasdf
    </div>
    <div class="clear"></div>
</div>
</body>
</html>
...