浮動：在課堂上留下不工作的數字標記

我是一個初學HTML5和CSS。我在float中遇到了一個問題：left。我想將數字顯示在前一個的右側，但它不起作用。我試過尋找一些SO問題，但還沒有找到確切的答案。這將是巨大的，如果你能幫助浮動：在課堂上留下不工作的數字標記

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<link 
    rel="stylesheet" 
    href="drop.css" 
> 

</head> 
<body> 

    <section id="pics"> 
     <figure 
      id="pic1" 
      class="pictures" 
     > 
      <img 
       alt="figure1" 
       src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg" 
       title="pic1" 
      > 
     </figure> 


     <figure 
      id="pic2" 
      class="pictures" 
     > 
      <img 
       alt="figure2" 
       src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg" 
       title="pic2" 
      > 
     </figure> 
    </section> 
</body> 

</html>

CSS：

#pics{ 
    width:200px; 
    height:200px; 
} 

.pictures{ 
    float: left; 
} 

.pictures img{ 
    width:100%; 
    height:auto; 
}

來源

2014-04-14 GodMan

你的問題在於你的寬度值。你告訴容器#pics是200px寬度。然後，您將圖像告知其容器的100％。因爲#pic1和#pic2元素沒有定義寬度，所以它們默認設置爲auto。這意味着您的<img>元素佔據了容器元素的寬度的100％（200px）。

我建議讓你的img標籤爲100％寬度，然後他們將採取其包含元素的全寬度。你必須做什麼來修復浮動，然後也給.pictures類寬度。

此外，<figure>元素以及大多數元素都應用了一些默認樣式，如邊距空間。除了寬度之外，您還需要確保沒有邊距，填充或邊框空間，否則您的浮點數將再次中斷。

例如...

http://jsfiddle.net/ECs4g/2/

.pictures{ 
    float: left; 
    width: 50%; 
    padding: 0; 
    margin: 0; 
}

下面是你需要了解的一切花車鏈接：http://css-tricks.com/all-about-floats/

來源

2014-04-14 17:02:09 Michael

分配200像素寬度#pics，但那就是你的貨櫃。圖像沒有機會彼此相鄰顯示。如果有疑問，瀏覽器會打破並移動下面的數字，這就是您現在看到的。

要修復，設置寬度爲數字內容，而不是：

.pictures { 
    float: left; 
    width: 200px; 
    height: 200px; 
}

來源

2014-04-14 16:49:42 Boldewyn

還要注意的是'figure'元素可能有一些默認的樣式，這將影響佈局。 – Palpatim

我已經將'200px'分配給'pics'，因爲我想'section'使用我定義的空間。但是，使用您的解決方案也有可能嗎？ – GodMan

好吧，你不能同時擁有兩個圖像，並且圖像相鄰並且是一個狹窄的容器。也就是說，如果你真的需要這個（小於100px），你需要在'.pictures'上設置一個較小的'width'。 – Boldewyn

那是因爲你的寬度和高度屬性設置爲僅200像素值。

增加該值，你的圖像將浮動到左側。您也需要在這裏設置容器大小的一部分的圖像大小。

這裏將是例如：

.pictures img { 
    width: 40%; 
}

然後，圖像將具有容器寬度的40％的寬度。所以訣竅是增加容器的大小並減小圖像的大小，然後圖像將浮動到容器的左側大小。

來源

2014-04-14 16:50:10

圖像本身非常大，並將其設置爲任何合理的值仍然會阻止它們漂浮。 – BoltClock

您正在將img寬度設置爲100％。嘗試將其設置爲50％以下的值，並查看其工作原理。

另外，請注意，許多瀏覽器都有default style for the HTML5 figure element。您必須處理額外的填充/邊距以使佈局按預期工作。

來源

2014-04-14 16:52:12 Palpatim

而不是改變他的img寬度，最好是將圖像保持爲100％，但然後改變元素的寬度以使它們正確地浮動。 – Michael

浮動：在課堂上留下不工作的數字標記

回答

相關問題