有元素相鄰

我一直在環顧四周，還沒有找到一種方法讓我的元素顯示我想要的方式（主要是因爲我絕對不知道我在做什麼CSS）。有元素相鄰

這裏是我JS提琴： https://jsfiddle.net/q0qjhk8p/2/

而這裏的如何，我想它要顯示的ASCII示範開始：

Title goes here 
---------------------------------------------------------------------------- 
Content put here should be on       [  image    
the left side, yet not affect the        goes 
avatar on the right.           here  ] 
                  And this 
                  text should 
                  be centered 
                  underneath the 
                  image. 
--------------------------------------------------------------------------- 
Blablablablaba footer

來源

2017-04-17 Yemiez

什麼是您的瀏覽器支持？ Flex盒子是我的解決方案，但是如果你需要支持不支持Flex盒子的瀏覽器，你需要使用別的東西。 https://caniuse.com/#feat=flexbox – gargantuan

@gargantuan我使用Opera開發人員版本。我並不需要支持任何舊版瀏覽器（只有現代）。我會檢查彈出的東西，以前沒聽說過。 – Yemiez

因此，這裏是要注意的一個solution using FlexBox

的事情...

我刪除了所有的text-align東西。這是用來獲取您要尋找的佈局的錯誤屬性。
我製作了一個百分比寬度的阿凡達容器，並將圖像的寬度設置爲100％。這樣你就有了一個響應性很強的解決方案如果你想的話，你可以設置一個明確的化身容器的寬度。
如果需要，也可以爲副本設置明確的寬度。我建議設置一個百分比寬度和一個右邊距。

繁重與Flexbox的完成，

.user-profile-card > .user-profile-card-body { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    padding: 10px; 
    background: #AAA; 
}

來源

2017-04-17 13:38:13 gargantuan

謝謝。你的答案似乎是最短和最簡單的答案，我已經接受你的答案！ – Yemiez

我添加了一些額外的div並且還使用了下面的CSS

浮動：左//浮到內容到左側
浮動：鑽機HT //將頭像浮到卡片的右側。
顯示：內聯盒//這是使圖像停留在同一行內容

看到小提琴下面

https://jsfiddle.net/n4k469o3/

CSS

.user-profile-card { 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
    transition: 0.3s; 
    border-radius: 5px; 
    padding: 10px; 
    border: solid 1px transparent; 
} 
.content { 
    width:100px; 
    display: inline-block; 
    float: left; 

} 
.user-profile-card:hover { 
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2) 
} 
.user-profile-card > .user-profile-card-title { 
    padding-bottom: 10px; 
    border-bottom: solid 1px #ccc; 
    text-align: left; 
    font-size: 24px; 
} 

.user-profile-card > .user-profile-card-body { 
    padding: 10px; 
    text-align: left; 
} 

.user-profile-card > .user-profile-card-body > .user-profile-card-avatar { 
    align-content: right; 
    text-align: right; 
    display: inline-block; 
    width: 110px; 
    float: right; 
} 

.img-card-avatar { 
    border-radius: 50px; 
} 

.user-profile-card > .user-profile-card-foot { 
    padding-bottom: 5px; 
    padding-top: 10px; 
    border-top: solid 1px #ccc; 
    text-align: left; 
    font-size: 10px; 
    margin-top:240px; 
}

HTML

<div class="user-profile-card"> 
    <div class="user-profile-card-title"> 
    A title is put here 
    </div> 
    <div class="user-profile-card-body"> 
    <div class="content"> 
    Content put here should be on the left side, yet not affect the avatar on the right. 
    </div> 
    <div class="user-profile-card-avatar"> 
     <img src="https://i.stack.imgur.com/pH9qA.jpg"><br> 
      And this text should be centered underneath the image. 
    </div> 
    </div> 
    <div class="user-profile-card-foot"> 
    Some footer stuff is put here. 
    </div> 
</div>

來源

2017-04-17 13:35:50

要做到這一點最簡單的方法是包裝在一個div的主要內容。然後用另一個div將圖像和潛臺詞包裝起來。我已將它們包裝在main標籤下面，以便突出顯示，但如果您尚不熟悉語義標籤，則可以使用div。

https://jsfiddle.net/g90xxaaj/

然後，我給了主標籤display: flex CSS屬性，這使得的div裏面並排而坐。

然後，我添加了div包裝圖像和subtext'文本對齊：中心'屬性。

您不必使用Flexbox的這個，但它是對付這樣的事情是CSS的一個很好的方式。另一種方式你可以做到這一點是看看浮動物。 Joshua Duxbury的答案解釋瞭如何做到這一點。不使用flexbox的一個原因是它比較新，不適用於Internet Explorer 9或更早的版本。如果這不是一個問題，那麼flexbox比長期使用浮動模塊要困難得多。

這可能是更多地瞭解Flexbox的最好起點：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 這是一場偉大的比賽的實踐中發揮：http://flexboxfroggy.com/ 這裏是一個夢幻般的自由當然，如果你有時間和嚴重：https://flexbox.io/

來源

2017-04-17 13:40:03

回答

相關問題