Расположение текста рядом с изображением

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я пытаюсь расположить текст рядом с моим изображением (справа). Я много чего перепробовал. Чего мне не хватает? Любая помощь будет высоко оценена. Спасибо

 <div id="bandmembercontainer">
      <img src="img/NOBBY_BOULDER.jpg" class="nobbyboulder" />
        <div class="bandmemberinfo"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros dolor, blandit sed risus vitae, scelerisque tempor magna. Integer quis ultricies massa. Cras eu convallis justo, et scelerisque nibh. Donec sed tellus metus. In hac habitasse platea dictumst. Mauris lacus ligula, cursus in mattis eget, sollicitudin a mauris. Duis commodo sapien eget tellus scelerisque pellentesque. Praesent tristique metus lacus. Aliquam erat volutpat. Maecenas vitae finibus magna. Donec vehicula luctus sagittis. Donec euismod eget enim et consequat. Sed accumsan odio sit amet hendrerit mollis. Vestibulum porta ultrices mauris id consectetur. Sed quis euismod arcu. Ut vulputate sed magna vel dignissim.</p>

        <p>Vivamus convallis neque in ex condimentum, vel dictum orci malesuada. Integer dignissim accumsan orci at interdum. Nunc accumsan nunc a dui tincidunt, at dignissim tellus rutrum. Vestibulum blandit scelerisque mauris, in elementum diam egestas eu. Sed in est et velit suscipit suscipit. Praesent euismod ornare justo, eget laoreet nulla posuere eu. In suscipit pretium est, eget vehicula nisl iaculis in. In sit amet nibh in nisi fringilla sagittis a ut tortor.</p>

        <p>Phasellus eu rhoncus ligula. Morbi at diam pellentesque metus pulvinar eleifend. Nulla vitae odio sit amet libero gravida scelerisque id at enim. Nunc eget turpis euismod augue lobortis lacinia eget non mauris. Suspendisse scelerisque porta dui eu auctor. Morbi risus neque, cursus at interdum vel, porttitor vel leo. Nunc ut imperdiet sem. Integer eros felis, elementum at erat ac, commodo dapibus orci. In consectetur feugiat mi facilisis condimentum.</p>
        </div>
    </div>
  

CSS

 bandmembercontainer {
  width: 100%;
  border: #fff 2px solid;
  background-color: white;
  height: auto;
  margin-top: 15px;
  -moz-box-shadow: 0 0 5px #fff;
  -webkit-box-shadow: 0 0 5px #fff;
  box-shadow: 0px 0px 10px #fff;
}

.nobbyboulder {
  margin: 5px;
  display: inline-block;
}

.bandmemberinfo {
  margin: 5px;
  background-color: yellow;
  height: auto;
  display: inline-block;
}
  

Ответ №1:

Вы имеете в виду что-то подобное?

     <html>
    <head>

    <style type="text/css">
    #bandmembercontainer {
      width: 100%;
      border: #f4f4f4 2px solid;
      margin-top: 15px;
      background: url('img/NOBBY_BOULDER.jpg') top right no-repeat #FFFFFF;
    }
    .bandmemberinfo {
      margin-right:30px;
      background-color: yellow;
      height: auto;
      padding:5px;
    }
    </style>
    </head>
    <body>
    <div id="bandmembercontainer">
        <div class="bandmemberinfo"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eros dolor, blandit sed risus vitae, scelerisque tempor magna. Integer quis ultricies massa. Cras eu convallis justo, et scelerisque nibh. Donec sed tellus metus. In hac habitasse platea dictumst. Mauris lacus ligula, cursus in mattis eget, sollicitudin a mauris. Duis commodo sapien eget tellus scelerisque pellentesque. Praesent tristique metus lacus. Aliquam erat volutpat. Maecenas vitae finibus magna. Donec vehicula luctus sagittis. Donec euismod eget enim et consequat. Sed accumsan odio sit amet hendrerit mollis. Vestibulum porta ultrices mauris id consectetur. Sed quis euismod arcu. Ut vulputate sed magna vel dignissim.</p>
                <p>Vivamus convallis neque in ex condimentum, vel dictum orci malesuada. Integer dignissim accumsan orci at interdum. Nunc accumsan nunc a dui tincidunt, at dignissim tellus rutrum. Vestibulum blandit scelerisque mauris, in elementum diam egestas eu. Sed in est et velit suscipit suscipit. Praesent euismod ornare justo, eget laoreet nulla posuere eu. In suscipit pretium est, eget vehicula nisl iaculis in. In sit amet nibh in nisi fringilla sagittis a ut tortor.</p>
                <p>Phasellus eu rhoncus ligula. Morbi at diam pellentesque metus pulvinar eleifend. Nulla vitae odio sit amet libero gravida scelerisque id at enim. Nunc eget turpis euismod augue lobortis lacinia eget non mauris. Suspendisse scelerisque porta dui eu auctor. Morbi risus neque, cursus at interdum vel, porttitor vel leo. Nunc ut imperdiet sem. Integer eros felis, elementum at erat ac, commodo dapibus orci. In consectetur feugiat mi facilisis condimentum.</p>
            </div>
        </div>
    </body>
    </html>
  

Значок устанавливается на задний план, а правое поле делает его видимым.