Html 文本和图像对半，相邻对齐

示例：（Photoshop）。 黑色=滑块，灰色=图像，白色=文本带可变背景色的区域

我还想让它对电话设备等做出响应，但如果我只拍摄一张只有页面宽度一半和高度的图像，这也行不通

我试图将一个图像与它旁边的一个容器中的文本与文本的背景完全对齐。我尝试使用左边的属性：；右：；，边缘和填充物，但这不起作用

图片和文字应位于名为A3L_标语和A3L_标语的div下方。我希望任何人都能给我指出好的方向

在下面，您可以找到一个没有任何代码的JS提琴

正文{
宽度：100%；
保证金：0；
字体系列：“开放式sans”，无衬线；
缩放：1；
溢出x：隐藏；
}
标题{
填充：20px0；
背景色：#ffffff；
盒影：0.4px 6px rgba（0,0,0,2）；
}
.集装箱{
填充：0 20px；
保证金：0自动；
}
.标志盒{
浮动：左；
右边距：20px；
}
.标志盒a{
大纲：无；
显示：块；
}
.logo框img{display:block；}
导航{
溢出：隐藏；
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0px 10px 0px 0px；
浮动：对；
}
李海军{
显示：内联块；
左边距：25px；
高度：70像素；
线高：70px；
过渡：5s线性；
}
导航a{
文字装饰：无；
显示：块；
位置：相对位置；
颜色：#868686；
文本转换：大写；
}
导航a：之后{
内容：“；
宽度：0；
高度：2倍；
位置：绝对位置；
左：0；
底部：15px；
背景#8686；
过渡：宽度。5s线性；
}
导航a:悬停：在{宽度：100%；}之后
@媒体屏幕和屏幕（最大宽度：660像素）{
标题{文本对齐：居中；}
.标志盒{
浮动：无；
显示：内联块；
利润率：0.16px 0；
}
ul{float:none；}
nav li:类型{margin left:0；}的第一个
}
@媒体屏幕和屏幕（最大宽度：550px）{
导航{溢出：可见；}
李海军{
显示：块；
保证金：0；
高度：40px；
线高：40px；
}
导航李：悬停{背景：rgba（0,0,0,1）；}
导航a:在{content:none；}之后
}
.A3L_标语，.幻灯片{
位置：相对位置；
}
.幻灯片放映{
高度：600px；
}
法登先生{
宽度：100%；
位置：绝对位置；
最大高度：600px；
左：0；
排名：0；
}
.A3L_口号{
边缘顶部：20px；
边缘底部：20px；
文本对齐：居中；
}
.标语及名称{
字体大小：46px；
字号：700；
填充：15px；
文本转换：大写；
}
.标语{
字体大小：30px；
字号：500；
文本转换：大写；
}
@仅介质屏幕和（最大宽度：640像素）{
.幻灯片放映{
高度：300px；
}
法登先生{
宽度：100%；
位置：绝对位置；
最大高度：300px；
左：0；
排名：0；
}
}
@仅介质屏幕和（最大宽度：600px）{
.幻灯片放映{
高度：200px；
}
法登先生{
宽度：100%；
位置：绝对位置；
最大高度：200px；
左：0；
排名：0；
}
}
@仅介质屏幕和（最大宽度：480px）{
.标志{
最大宽度：270px；
}
}
}

$（函数（）{
$（'.fadein img:gt（0）'）.hide（）；
setInterval（函数（）{
$（'.fadein:first child'）.fadeOut（）.next（'img'）.fadein（）.end（）.appendTo（'.fadein'）；
}, 4000);
});







核心角色扮演社区
下一级角色扮演体验

将图像和文本放入一个容器中，例如：

 <div class="container-row">

    <div class="hero-image">
      <img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
    </div>
    <div class="A3L_Slogan">
      <div class="slogan_title">
        Hardcore Roleplay Community
      </div>
      <div class="slogan_catchphrase">
        The next level roleplay experience
      </div>
    </div>
  </div>

---

你好，我试过了，但似乎不起作用。它只会使图像全宽。A3L标语div也应该留在原处，它应该在标语下方，有不同的文字和标题。你必须为你的图像设置宽度。为了响应，最好在css或img部分本身中设置最大宽度？你可以通过，阅读更多关于flexbox的信息。所以你不需要写媒体查询。嗨，我找到了。现在唯一的问题是文本之间没有正确地对齐。另外，当我测试响应性时，文本只是消失在图像后面，而不在图像下面

.container-row{
  display: flex;
}

.container-row .hero-image{
  flex: 1;
}

.container-row .A3L_Slogan {
  flex: 2;
}