- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
所以在我的网站上,在这个页面上http://dunnrite.co.uk/our_work右侧文本应该在右侧,但有时在 chrome 和其他浏览器中它会覆盖图像。当您刷新几次或调整浏览器大小时(我的网站是响应式的),它会恢复正常。
这是 HTML 代码:
<div id="content_box">
<div id="left_side_work">
<h3>Our Work</h3>
<a class="fancybox" rel="group" href="Images/Clubz4u.jpg">
<div id="clubz4u_pic"></div>
</a>
<a target="blank" href="http://beauxcadeaux.co.uk">
<div id="beaux_cadeaux_pic"></div>
</a>
</div>
<div id="right_side_work">
<h3>Clubz4u</h3></br>
<p>Clubz4u was a social enterprise that Dunn Rite set up for DHSB school. It enabled club owners/event organisers to list their activity's details on our site for free.
This also meant that anyone looking to join a club could easily see the clubs on offer in their region.
To help cover any costs associated with setting up the website Clubz4u had live adverts placed by Google which when clicked generated income.
We also produced interactive Facebook features.
</p>
<div id="beaux_cadeax_text">
<h3 style="margin-top:150px;">Beaux Cadeaux</h3></br>
<p>Beaux Cadeaux is an online gift shop created by husband and wife Val and Richard Cass. They recently created their own website and needed Dunn Rite's assistance gaining some SEO. Richard commented on our Dunn Rite representative saying "I have found you to have a maturity and professionalism beyond your years. You have been helpful and efficient. It would be good to think that we could both benefit from working with each other in the future."
</p>
</div>
</div>
<div id="nextpage">
<a href="our_work2">Next →</a>
</div>
</div>
和对应的CSS
#left_side_work {
width: 40%;
padding-top: 30px;
left: 0;
margin-left: -250px;
float: left;
}
#right_side_work {
margin-top: 35px;
display: inline-block;
width: 400px;
height: auto;
float: right;
margin-left: 70px;
position: absolute;
}
有什么想法吗?
谢谢
最佳答案
快速回答:从 #right_side_work
中删除 float: right
更长的答案:甚至不要考虑将绝对定位用于布局目的(以及大多数其他用途),因为您允许 block 将一个叠加在另一个之上......失败。
不必同时使用 float 定位和绝对定位:可以使用 right: 0
将其定位到右侧(但不要使用绝对定位)。
float block 应该首先出现在您的 HTML 代码中。如果它是一个 div 并且它是 float 的,为什么还要设置 inline-block
?
您是否尝试在每张图片旁边显示文字?那么您的 HTML 代码应该是:image1 - text1 - image2 - text2 - etc
,而不是 (all the image) - (all the text)
。创建内容的行/行,然后在每列中创建内容,而不是 2 个巨大的文本列,即使进行最轻微的修改也永远不会水平对齐。
最后,left
、right
、top
和 bottom
属性仅在元素位于某种方式。此处对左侧部分没有影响。
关于html - 为什么我的网站文字与图片重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24585756/
由于 typescript 现在支持条件类型,我决定进行一些元编程,为 VSCODE intellisense 添加更多 flavor 。但是,虽然使用 A extends B 可以轻松分离其他类型,
我有一个 php var,它在回显时将 JS 函数写入页面的源代码。该函数循环遍历 CSV,因此其中包含以下行: $str="var lines = data.split('\n');"; 目前,当回
我有以下代码: name= "a"; value="b" $.post("ajax.php", {name:value}).... 然而 ajax.php 将收到 name=b 而不是 a=b。 我如
以下情况: var myVehicle = { brand: 'Tesla' }; var isMoving = Symbol(); var currentStatus = Symbol(); myV
我正在为 Python 翻译器编写 JavaScript,“\8”和“\9”给我带来了很多问题。根据文档,像“\8”或“\9”这样的东西是非法的,因为它们不是有效的八进制转义符。 Esprima pa
我有一个简单的 LinearLayout。当我将 android:background 添加到 LinearLayout 时,TextView 不再可见。 我不明白什么?
在尝试获得某种效果时遇到困难: 我有一张图片。我想将鼠标悬停在它上面。它应该变黑并弹出一些文本。 例子^ 执行此操作最简单/最简单的设置是什么?最好只有 HTML 和 CSS 注意:该元素需要在 CS
考虑以下代码: #include void f(const char * str) { str = "java"; } void main (int argc, char * argv[])
我想在 MySQL 中插入一条具有非 ASCII Unicode 字符的记录,但我在一个不允许我轻松键入非 ASCII 字符的终端上。如何在 MySQL 的 SQL 语法中转义 Unicode 文字?
Perl脚本batchReplace.pl可以用来批量替换文件中的文字/代码。可在指定目录中查找指定类型的文件,并递归检查子目录;在输出文件时复制输入文件的目录结构。 [附件]Win32应用程序b
我知道从 flutter 应用程序共享的官方包。 https://pub.dartlang.org/packages/share 共享文本和 url 很容易,但我想共享来自服务器的图像意味着它是 UR
在 Qt 文档中,它说 qreal是一个 Typedef for double unless Qt is configured with the -qreal float option. 这基本上意味
我想让 idris 证明 testMult : mult 3 3 = 9有人居住。 不幸的是,这是键入为 mult (fromInteger 3) (fromInteger 3) = fromInte
如您所知,Apple 为 NSNumber、NSDictionary、NSArray 等类提供了 @literals,因此我们可以通过这种方式创建对象,例如 NSArray *array = @[ob
有没有办法在类型上定义公共(public)文字(C# 中的公共(public) const)?显然 let 类型中的绑定(bind)必须是私有(private)的,并且 Literal 属性不能应用于
为什么下面的语法不能识别 bool 值? 我已经将其与 Java 和 GraphQL 的语法进行了比较,但不明白为什么它不起作用。 给定以下语法,解析如下: foo = null // foo = v
当我需要一个文字来测试一个带有序列的函数时,我注意到我自己的习惯比列表更频繁地使用向量。 IE。 : (map inc [1 2 3]) 但不是: (map inc (list 1 2 3)) 虽然它
是否可以在sqlite中制作类似的东西? FOREIGN KEY(TypeCode, 'ARawValue', IdServeur) REFERENCES OTHERTABLE(TypeCode, T
在我这学期的系统软件类(class)中,我们正在学习汇编程序和其他系统软件。在阅读整个类(class)时,我遇到了LITERALS主题。 对文字和立即操作数进行了比较,发现它们之间的唯一区别是文字不被
我正在使用命令行语法编写一个 gstreamer 管道来发送视频流,并想用它发送数据。我认为可行的一种解决方案是将数据作为字幕文件发送。 我可以使用以下管道通过 rtp 多路复用视频和字幕文件: gs
我是一名优秀的程序员,十分优秀!