Question

我正在尝试将文字放在我的图像旁边（右侧）。我尝试过很多东西。我错过了什么？任何帮助都将受到大力赞赏。感谢

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

Answer 1

只需将float属性添加到图像中，并将图像和text-div的宽度设置为50％，以使它们完美地适合窗口。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的意思是这样吗？

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

图标设置为背景，右边距使其可见。

定位图像旁边的文字

2 个答案: