Question

晚安，

我尝试过将文本放在图像右侧，当浏览器较小时，然后在图像下方放下。有人可以告诉我我做错了什么或不做。

＆＃13;

#bandmemberinfo-container {
  width: 100%;
  background-color: black;
  height: auto;
  margin-top: 10px;
  border: 1px red solid;
  color: #fff;
  font-family: Arial;
  font-size: 10px;
  text-transform: uppercase;
}
.bandmemberinfo-container img {
  height: 100%;
  max-width: 350px;
  float: left;
}

＆＃13;

<div id="bandmemberinfo-container">
  <!-- BAND MEMBER INFO CONTAINER START -->

  <img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />

  <p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
    OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
    THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
    ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>

  <!-- BAND MEMBER INFO CONTAINER END-->
</div>

＆＃13;

Answer 1

您正在使用HTML中没有的类选择器使用：

#bandmemberinfo-container img {
  height: 100%;
  max-width: 350px;
  float: left;
}

或添加＆＃34; bandmemberinfo-container＆＃34; class not id（http://www.w3schools.com/css/css_syntax.asp;）

Answer 2

我认为你想要的效果是什么。您可以将图像放在段落标记内作为文本开始之前的第一个项目，然后文本将环绕图像。然后，您可以只为图像添加边距，以便在图像和文本之间留出额外的空间。并且可能使用图像align-attribute

我在下面添加了另一个更重的html元素方法，以显示另一种控制布局的方法。这是使用浮动和更敏感的方法。

我也会避免使用ID;使用类作为经验法则。因为只考虑一下。而且，如果您不关心传统（IE）浏览器，那么您可以考虑使用Flexbox。这将有助于不同的屏幕和图像包装。

＆＃13;

.bandmemberinfo-container {
  display: inline-flex;
  width: 100%;
  background-color: black;
  height: auto;
  margin-top: 1em;
  border: 1px red solid;
  color: #fff;
  font-family: Arial;
  font-size: 0.9em;
  text-transform: uppercase;
}
.img_wrap {
  float: left;
  width: 50%;
  border: 1px yellow dashed;

}
.img_wrap img {
  height: auto;
  max-width: 100%;
}
.two {
  float: left;
  width: 50%;
}

＆＃13;

<div class="bandmemberinfo-container">
  <div class='img_wrap'><img src="http://slade40years.page4.com/nobby_439_752.jpg" /></div>

<div class='two'>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
    OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
    THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
    ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p></div>

  <!-- BAND MEMBER INFO CONTAINER END-->
</div>

＆＃13;

Answer 3

你有两个小错误：

1。）图片的选择器必须是#bandmemberinfo-container img而不是.bandmemberinfo-container img

2。）它的CSS设置应该是这样的：

#bandmemberinfo-container img {
  width: 100%;
  max-width: 350px;
  float: left;
}

即。小屏幕（宽度低于350px），但最大宽度为350px，则文本将在较大的屏幕（350px以上）上浮动。

#bandmemberinfo-container {
  width: 100%;
  background-color: black;
  height: auto;
  margin-top: 10px;
  border: 1px red solid;
  color: #fff;
  font-family: Arial;
  font-size: 10px;
  text-transform: uppercase;
}
#bandmemberinfo-container img {
  width: 100%;
  max-width: 350px;
  float: left;
}

<div id="bandmemberinfo-container">
  <!-- BAND MEMBER INFO CONTAINER START -->

  <img src="http://slade40years.page4.com/nobby_439_752.jpg" class="img-responsive nobbyboulder" />

  <p>THE 1970'S HOSTED ONE OF THE MOST FLAMBOYANT DECADES IN THE HISTORY OF POP MUSIC AND ARTISTS SUCH AS SWEET, DAVID BOWIE, WIZZARD, T-REX AND MUD CHAMPIONED THE "GLAM ROCK" MOVEMENT, WHERE PLATFORM BOOTS, SEQUINNED SHIRTS, TWO-TONE FLARED TROUSERS AND
    OUTRAGEOUS MAKE-UP, BECAME THE NORM FOR MANY POP BANDS. THE MIGHTY SLADE LED THE GLAM MARCH ACROSS THE UK, INTO EUROPE AND THROUGHOUT THE WORLD. IT IS A PART OF POP HISTORY THAT HAS SHAPED MUSIC CULTURE MANY YEARS LATER AND SLYDE CONTINUE TO KEEP
    THE EXCITING ATMOSPHERE OF GLAMROCK ALIVE. THEY ARE THE PERFECT CHOICE FOR ANY 70'S THEMED EVENT WITH AN IMPRESSIVE STAGE SHOW DURING WHICH THEY COVER MANY OF THE CLASSIC HITS OF THAT ERA SLYDE HAVE SUPPORTED ARTISTS SUCH AS THE RUBETTES, BAY CITY
    ROLLERS, SMOKIE, BONEY M AND THE LATE ALVIN STARDUST. THEY ARE THE LONGEST RUNNING TRIBUTE TO THE MUSIC OF SLADE AND HAVE PERFORMED WITH THEM AT 70'S WEEKENDERS, UNDER THE NAME OF GLAMROCK UK.</p>

  <!-- BAND MEMBER INFO CONTAINER END-->
</div>

在图像周围环绕文字（响应）

3 个答案: