有元素相邻

我一直在环顾四周，还没有找到一种方法让我的元素显示我想要的方式（主要是因为我绝对不知道我在做什么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

回答

相关问题