Question

我有一个横幅，需要将图像向左对齐，并从上到下全高。图像右侧是带有Tab选择Div的H1，下面是Text / Content Div。图像设置为通过WordPress我想要的高度和宽度。

这是我要去的图片：

我可以通过在图像上向左浮动以使Div文本移至右侧来某种程度地获得所需的内容。

但是我最大的问题是我无法使图像正确地对齐横幅的左上方。我必须使用-142px左边距和-281px顶部空白来使它看起来像原来，但是在更大的屏幕上，我希望该图像始终保持在左侧并保持一致。它不会留在更大的屏幕尺寸上。

是这样的：

这是Image Div的代码：（在WordPress上将图片尺寸设置为641宽x 716高度）

  margin-left: -142px; 
  margin-top: -281px;
  float:left;
  max-width:103%;
  left:0;
  display:inline-block;
  top:0;
  position:relative;

该死的图像只是停留在底部。我确保H1元素没有显示为“阻止”，以防它阻止了图像的向上移动。

我使用此代码的Div图像和Div文本周围有一个包装：

display: inline-block;
position:relative;
width: 100%;

当我通过Chrome检查器查看时，“图像和文本”包装器的宽度也没有完全穿过“横幅”部分。这个包装只是我的问题吗？还是我以图片为目标？

还要澄清一下：我正在尝试在WordPress上编写此横幅广告，因此我可以进行非常有限的HTML更改。

谢谢！！我一直在SO和Google上到处寻找，但似乎找不到我想要的东西。也许我的问题太具体了？我非常感谢您的帮助。如果有帮助，我也很乐意提供更多示例/发布更多代码。

Answer 1

这是我所做的简短示例，可能会对您有所帮助。无需为此使用float属性。只需根据屏幕大小将width属性指定为任意大小即可。

* {
    margin: 0;
}

header {
    background: url(https://placeimg.com/1000/500/any);
    width: 100%;
    height: 500px;
    background-size: cover;
}

header .header_img_left {
    background: url(https://placeimg.com/640/480/any);
    width: 35%;
    height: 100%;
    background-size: cover;
}

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <header>
            <div class="header_img_left">
            
            </div>
        </header>
	</body>
</html>

Answer 2

将CSS赋予int

<img>

也许这应该可行，否则请发布html CSS，我可以提供更多帮助

浮动图像对齐左上方

2 个答案: