HTML CSS对齐图像旁边的div和文本

Question

您好我已经阅读了一些与我有类似困难的人的文章，但没有一个解决方案似乎适合我。enter image description here

我正在尝试创建类似附加图片的内容但文本似乎总是在图像下方，无论我编辑的是什么CSS。

.newstitle {
  background-color: #ffed00;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  display: inline-block;
}

.newspic img {
  padding: 20px;
  height: 300px;
  vertical-align: middle;
}

<section class="main">

  <div class="newspic">
    <img src="https://placehold.it/500x300" alt="Photo placeholder">
  </div>

  <div class="newstitle">
    D'votion presents his bassline remix of Post Malone's Rockstar
  </div>

</section>

Answer 1

我删除了<div>的{​​{1}}容器，并将<img>传递给了图片。然后，我将class="newspic"和.newstitle相对于.newspic放置，并分别给他们parent和width:70%。

此处的关键，因为您使用width:30%;是将paddings包含在两个类中，因此在计算宽度时会考虑填充。

以下是工作代码：（运行代码段＆amp;尝试全屏）

box-sizing:border-box;

.main{
}

.newstitle
{
  position:relative;
  float:left;
  width:70%;
  background-color: #ffed00;
  font-family : Arial, Helvetica, sans-serif;
  font-weight : bold;
  font-size: 16px;
  box-sizing:border-box;
}

.newspic
{
  position:relative;
  float:left;
  padding: 20px;
  width:30%;
  height: auto;
  box-sizing:border-box;
}

Answer 2

只需将文本容器放在带图像的div中。

<section class="">
<div class="newspic">
<img src="Art portfolio/illustrations/IMG_0844.JPG" alt="Photo placeholder">
<div class="newstitle">
 D'votion presents his bassline remix of Post Malone's Rockstar
</div>
</div>
</section>

Answer 3

为什么不试试这个：

HTML

<section class="main">

<div class="newspic">
  <img src="https://images.unsplash.com/photo-1476124861542-44354851e622?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=eac3b3d003e83c809de608dd6dcc3857" alt="Photo placeholder">
</div>

<div class="newstitle">
  D'votion presents his bassline remix of Post Malone's Rockstar
</div>

</section>

CSS

.main {
  display: flex;
  justify-content: space-between;
}

.newspic {
  width: 50%;
}
.newspic img {
  max-width: 100%;
}

您可以在此处查看：https://codepen.io/jobaelish/pen/QaxXww

这是一个简单的解决方法。

尽管如此，如果您的HTML没有受到影响，那么您需要确保您的样式表在文档head元素中正确链接。

<link rel="stylesheet" type="text/css" href="PATHTOCSSHERE">

Answer 4

有几个＆＃34;几个＆＃34;完成这项任务的方法。一种方法是在侧面文本上添加内联显示，并将图片浮动到左侧。还要在图片上设置宽度。您也可以使用flexbox，或者您可以使用float，文本与图片位于同一div中。

＆＃13;

＆＃13;

  
.newstitle{

  background-color: #ffed00;
  font-family : Arial, Helvetica, sans-serif;
  font-weight : bold;
  font-size: 20px;
  display: inline;
}

.newspic img{
  width: 300px;
  float: left;
padding: 20px;
  height: 300px;
  vertical-align: middle;
}
  

＆＃13;

<section class="main">

<div class="newspic">
  <img src="https://www.google.com/logos/doodles/2018/zhou-youguangs-112th-birthday-5826412689752064-law.gif"  alt="Photo placeholder">
</div>

<div class="newstitle">
  D'votion presents his bassline remix of Post Malone's Rockstar
</div>

</section>

＆＃13;

＆＃13;

＆＃13;