个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
感谢Erik's help关于我的最后一个问题，我能够让我的图标左移、文本右移的 float div 示例正常工作:
http://tanguay.info/web/examples/tablelessItemLayout
(来源:tanguay.info)
但是，由于图像的宽度各不相同，我不得不通过在一些标签中放置内联样式来作弊。
我如何更改此代码以便:
代码:
<html>
<style>
* { margin: 0; padding: 0 }
body {
padding: 20px;
text-align: center;
background-color: #333;
}
p {
margin: 0 0 10px 0;
}
#content {
width: 600px;
margin-left: auto;
margin-right: auto;
background: brown;
border: 1px solid #555;
text-align: left;
}
.item {
margin: 20px;
background-image:url('paperBackground.jpg');
padding: 20px;
}
.itemIcon {
float:left;
}
.itemIcon p {
font-size: 8pt;
margin: 5px 0 0 0;
}
.itemBody h1 {
font-size: 18pt;
color: brown;
margin: 0 0 10px 0;
}
.clear {
clear: both;
}
</style>
<body>
<div id="content">
<div class="item">
<div class="itemIcon" style="width: 70px; padding-left: -80px">
<img src="icon.png" alt=""/>
<p>This is the caption that is under the image.</p>
</div>
<div class="itemBody" style="margin-left: 80px">
<h1>This is the first item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
</div>
<div class="item">
<div class="itemIcon" style="width: 160px; padding-left: -170px">
<img src="bigIcon.png" alt=""/>
<p>This is the caption that is under the image and it is a very long text so it is going to wrap a couple times here in the left column under the image.</p>
</div>
<div class="itemBody" style="margin-left: 170px">
<h1>This is the second item</h1>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
<p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p>
</div>
</div>
</div>
</body>
</html>
最佳答案
如果添加 overflow: auto，您可以删除那些自定义内联边距和填充到 .itemBody相反:
.itemIcon {
float: left;
margin-right: 10px;
}
.itemBody {
overflow: auto;
}
但是，您将无法摆脱 .itemIcon 上的行内宽度像这样，因为 CSS 无法限制 <p> 的宽度到它前面的图像的宽度。但是，如果您只有一张图片而没有与之搭配的文本，则不需要宽度。
不过，如果您使用 CSS 表格，您可以完全摆脱内联样式:
.itemIcon {
display: table-cell;
padding-right: 10px;
}
.itemBody {
display: table-cell;
vertical-align: top;
width: 100%;
}
width: 100%在 itemBody 上强制 itemIcon 的宽度缩小到其最小宽度，这由图像的宽度决定。 vertical-align: top将停止 itemBody 的第一行从与 itemIcon 中的图像/文本对齐“表列”。
关于css - CSS 有没有办法确定和调整图像宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2351598/
24
4
0
我正在使用 Selenium Web 驱动程序 3.0，并且想要从打开的两个对话框(一个在后台，第二个在前台)的 Activity 对话框中单击“确定”按钮。如何从 html 下面的父 div 单击前
actions: [ FlatButton( onPressed: () {
我有一个问题有点超出我的范围(我真的很高兴我是 Beta)涉及重复项(所以 GROUP BY, HAVING, COUNT)，通过将解决方案保留在 SQLite 附带的标准函数中而变得更加复杂。我正在
使用DBI是否可以确定SELECT语句的已执行语句句柄是否返回任何行而不从中获取行？ IE。就像是: use DBI; ... my $sth = $dbh->prepare("SELECT ..."
是否可以为“确定”和“关闭”按钮指定回调函数？ 如果是JQuery Modal，则可以在初始化时使用按钮字典指定回调函数。 Semantic-ui模态是否提供类似的功能？按下确定后，我该如何寻求其他逻
我想阅读警报中的消息。 示例:如果警报显示“错误的电子邮件地址”。怎么读呢？意味着我想将该消息存储在字符串中。 如何在“警报”中单击“确定”...？？ 如何使用 Selenium 来做到这一点？ 最佳
我有一个删除按钮: 我试图首先查明是否已选择一个网站，如果已选择一个网站，我需要确定是否已选择一个或多个列表项，如果是，则继续删除这些项目。 我的 if 语句不断返回“您必须首先选择您的列表”，即使它
部分出于好奇——我们想知道在我们的应用程序中发生了什么——部分是因为我们需要在我们的代码中找到一些潜在的问题，我喜欢在我们的网络应用程序运行时跟踪一些一般值。这尤其包括某些对象图的分配内存。 我们的应
我将 SweetAlert 与 Symfony 结合使用，我希望用户在完成删除操作之前进行确认。 发生的情况是，当用户单击删除按钮时，SweetAlert 会弹出，然后立即消失，并且该项目被删除。 在
我们有一个应用程序可以生成不包括字母 O 的随机基数 35 [0-9A-Z]。我正在寻找一种解决方案来查找包含任何淫秽英语单词的代码，而无需搜索包含 10,000 个条目的列表每个生成的代码。每秒生成
这是我做的: #include #include int betweenArray(int a, int b){ int *arr,i,range; range = b - a +
我知道如何创建 警报和确认框，但我不知道如何做的是实际单击“确定”。我有一个弹出确认框的页面。 我想使用 Java Script 插件单击“确定”。基本上，我希望我的代码单击页面上的链接，然后在出现提
代码: swal('Your ORDER has been placed Successfully!!!'); window.location="index.php"; 甜蜜警报工
>>> import re >>> s = "These are the words in a sentence" >>> regex = re.compile('are|words') >>> [m
使用确定的理想散列函数给出随机期望线性时间算法两个数组 A[1..n] 和 B[1..n] 是否不相交，即 A 的元素是否也是 B 的元素。 谁能告诉我如何做到这一点，甚至如何开始考虑它？ 最佳答案
我在计算机科学课上有这段代码: int input=15; while (input < n ) { input = input *3;} 这段代码有 log3(n/15) 次循环的上限。我们怎样才能
我有一个允许 2 位玩家玩 TicTacToe 的程序。在每个玩家移动之后，它应该在那个点显示棋盘并返回一个名为 Status 的枚举，显示玩家是否应该继续，如果玩家赢了，还是平局。但是，该算法要么返
给定一个 y 值数组，例如 [-3400, -1000, 500, 1200, 3790]，我如何确定“好的”Y 轴标签并将它们放置在网格上？ ^ ---(6,000)-|---
假设我有一个检查用户登录的 SQL 语句: SELECT * FROM users WHERE username='test@example.com', password='abc123', expi
teradata中有返回表中哪一列被定义为主索引的命令吗？我没有制作一些我正在处理的表，也没有尝试优化我对这些表的连接。谢谢! 最佳答案 有dbc.IndicesV，其中IndexNumber=1表示
我是一名优秀的程序员,十分优秀！