html - 将文字放在图片旁边

我正在尝试在图片旁边（右侧）放置文本。我已经尝试了很多东西。我想念什么？任何帮助将不胜感激。谢谢

<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;
}

最佳答案

只需将float属性添加到图像，然后将图像和text-div的宽度设置为50％，即可使其完美适合窗口。

* {
  padding: 0;
  margin: 0;
  border: 0;
}

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 {
  width: 50%;
  float: right;
  display: inline-block;
}

.bandmemberinfo {
  width: 50%;
  background-color: yellow;
  height: auto;
  display: inline-block;
}

<div id="bandmembercontainer">
      <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.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>