Блог

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

 <div class="body">
        <div style="float: left;">
            <img src="me.png" height="310" width="350">
        </div>
        <p id="text"> BAJFS:LKJFKLJ#@LKJLK#FJ#@:LFKJ#@:LFKJ#@:LK#FJ:L#KFJ#:@LFKJ#:LFKJ#@F:L#K@JF:#LFK J </p>            
    </div>
  

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

 .body
{
width: 880px;
margin: 20px auto;
background-color: #CFECEC;
padding: 10px 16px;
-moz-border-radius: 2px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 5px;
-webkit-box-shadow: 3px 5px 4px #000;
-moz-box-shadow: 3px 5px 4px #000;
box-shadow: 3px 5px 4px #000;
}
  

Кто-нибудь может помочь мне создать картинку слева от этого фрейма с текстом справа?

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

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

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

     <div class="body">
            <div style="float: left;">
                <img src="me.png" height="310" width="350">
            </div>
            <p id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mi mi, porttitor et rhoncus ac, aliquet vitae nunc. Phasellus nec eros vel lectus tempus placerat. Aenean lacinia euismod ultricies. In non ullamcorper urna. Donec nisi dolor, dictum eu facilisis sed, semper a lacus. Nulla dictum molestie tellus vitae ultricies. Etiam urna est, sodales et ultricies quis, vestibulum et lectus. Fusce iaculis cursus eleifend. Fusce venenatis est non nulla adipiscing condimentum. Aenean volutpat lectus est, at dictum nibh. Quisque facilisis purus et arcu dapibus at fringilla metus elementum. Integer consequat pellentesque auctor. Duis hendrerit feugiat diam vel lobortis. Nunc mauris leo, lacinia sit amet laoreet ut, auctor a arcu.

    Aliquam dignissim rhoncus turpis, eget facilisis est blandit sed. Nunc quis nulla diam. Ut et quam nisl, a tristique mauris. Etiam ut quam in sem luctus pellentesque. Morbi viverra, odio ut tincidunt posuere, odio mauris egestas mi, non ornare arcu justo gravida risus. Sed odio leo, viverra ut tristique ac, imperdiet eu tortor. Nulla nunc nisl, pharetra eu ornare sed, aliquam quis lorem. Nunc pellentesque, libero eu venenatis laoreet, sapien augue ultricies sem, in facilisis nisi erat in odio. Suspendisse ullamcorper, risus at aliquam gravida, mi dolor adipiscing erat, ut tincidunt lacus urna sed leo. Cras posuere imperdiet velit, eu convallis velit ornare et. Praesent semper varius tortor, et malesuada sem malesuada quis. Mauris elementum sem ac ante aliquet faucibus et et nisi. Quisque id quam in dui varius egestas et eu diam. Fusce ultrices feugiat sapien.

    In aliquam congue urna in scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tortor eros, pellentesque id pharetra nec, interdum et tellus. In dapibus condimentum iaculis. Vivamus nec risus et ante blandit pretium non at tortor. Vivamus non sapien lorem. Phasellus ac nisi eget quam varius accumsan vel a ipsum. Phasellus mattis pellentesque auctor. Aenean risus mi, iaculis ut feugiat vel, pretium sit amet eros. Curabitur varius faucibus tempor.</p>            
        </div>
  

Вы можете задать ширину для вашего #text и переместить его правильно. Также вам нужно установить ширину для вашего родительского div изображения. Добавьте overflow: hidden; в .body, чтобы содержать плавающие элементы.

 #text {
  float: left;
  width: 550px;
}

.figure { /* add this to your images parent */
  float: left;
  width: 350px;
}

.body {
  ...
  overflow: hidden;
}