Question

我一直在四处寻找，并且找不到让我的元素能够展示我想要的方式的方法（主要是因为我绝对不知道我是什么？在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

Answer 1

我添加了一些额外的div并使用了以下CSS

float：left //浮动到左侧的内容
float：right //将头像浮动到卡片的右侧。
display：inline-box //这是为了使图像与内容保持在同一行

见下面的小提琴

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>

Answer 2

所以这里是solution using FlexBox

需要注意的事项是......

我删除了所有文字对齐的内容。这是用于获取您正在寻找的布局的错误属性。
我将Avatar容器设为百分比宽度，并将图片内部宽度设置为100％。这样你就有了一个反应灵敏的解决方案。如果需要，您可以设置头像容器的显式宽度。
如果需要，您也可以为副本设置显式宽度。我建议设置百分比宽度和右边距。

使用flexbox完成繁重的工作，

To set value in local storage:

localStorage.setItem("key","value");

To get value:

localStorage.getItem("key");

Answer 3

最简单的方法是将主要内容包装在div中。然后将图像和子文本中的div和div包装在另一个div中。我已将它们包装在下面的main标记中，只是为了突出，但如果您还不熟悉语义标记，则可以使用div。

https://jsfiddle.net/g90xxaaj/

然后我给主标签一个display: flex的css属性，这使得里面的div并排放置。

然后我添加了div将图像和子文本包含在`text-align：center'属性中。

你不必为此使用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/

彼此相邻的元素

3 个答案: