環繞文字圖像周圍（響應）

Question

晚上好，

我已經試了又試，以我的文字定位到圖像的右側，當瀏覽器要小，然後滴下來的圖像下方。 有人可以告訴我我做錯了什麼或不做什麼。

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

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

Answer 1

您使用的是類選擇，是不是在你的HTML 用途：

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

或添加 「bandmemberinfo容器」 類未ID（http://www.w3schools.com/css/css_syntax.asp;）

Answer 2

我想爲你想要的效果是什麼。您可以將圖片放在段落標記內作爲文字開始前的第一個項目，然後文字將環繞圖片。然後，您可以爲圖像添加邊距，以便在圖像和文字之間留出額外的空間。並可能使用圖像align-attribute

我在下面添加了另一個更重的html元素方法，以顯示另一種控制佈局的方法。這是使用浮動和更響應的方法。

我也會避免使用ID;作爲一個經驗法則使用類。因爲這只是一個想少想的事情。而且，如果您不關心傳統（IE）瀏覽器，那麼您可以考慮使用Flexbox。這將有助於不同的屏幕和圖像包裝。

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

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

Answer 3

你有兩個小錯誤：

1）對圖像的選擇必須是#bandmemberinfo-container img而不是.bandmemberinfo-container img

2）它的CSS設置應像這樣：

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

I.e.對於小屏幕（寬度不超過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>