【问题标题】:I try using floats to position some text but it is not even moving我尝试使用浮动来定位一些文本,但它甚至没有移动
【发布时间】:2020-06-09 19:09:05
【问题描述】:

我正在尝试将“埃里克·斯派克曼的简短摘要”与

在它之下。我想把它放在他的大照片旁边,如左侧所示。我尝试过向左浮动,但由于某种原因根本不起作用。我已附上我的代码。Full photo of the page

【问题讨论】:

  • @J Kardash:也许您想先粘贴您怀疑可能导致页面问题的代码或部分?
  • 您的问题的一部分似乎也被隐藏了...... [以及(?)]。如果是代码,则选择它并单击编辑器 ({}) 中的代码按钮。

标签: css position css-position positioning


【解决方案1】:

使用FlexboxGrid。我给你一个Flexbox的例子,你可以反思自己的情况,也可以搜索其他的。

.container {
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
 }
 
 img {
  width: 400px;
  height: 400px;
  margin-right: 10px;
 }
<div class = "container">
<img src = "https://www.w3schools.com/howto/img_avatar.png" alt = "Image" />

<p>Some text</p>
</div>

这里的想法是你需要用父 div 包装你的图像和文本,并使其成为一个 Flexbox。

flex-direction: row;     => Place the items side by side

justify-content: center; => Center the items horizontally

align-items: center;     => Center the items vertically

我鼓励您查看guide 关于Flexbox

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2022-09-28
    • 2013-01-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-01
    • 1970-01-01
    相关资源
    最近更新 更多