html - CSS 格式保持一致-6ren

html - CSS 格式保持一致

转载作者：太空狗更新时间：2023-10-29 14:40:10

25

4

花了很多时间来正确设置此格式，因此我们将不胜感激。我们有一堆关于 foos 的信息，我们希望将它们组合在一起。因此，如果我们有一堆 foos 并排列出，如果该元素导致 foos 换行，则整个 foo 将保持在一起.格式也应如下所示:所以文本在左边，数字在右边。

|-----------------------------------------------------|
|[icon] Brad (human)              [pic] (2)  [pic] (3)|
|-----------------------------------------------------|

所以主图标在最左边，然后是名称和型号，然后右对齐的是 siblings 和 kids(每个图标都有 css 嵌入式图标)。

每个 foo 可以有以下内容:

foo.id = 12345
foo.name = 'brad'
foo.model = 'human'
foo.image = ''
foo.kids = 3
foo.siblings = 2
foo.link = ''

-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>none</title>
<style type="text/css" >

body
{
    margin:         0;
    padding:        0;
    min-width:      850px;
    text-align:     left;
    line-height:    28px;
    font-size:      14px;
    font-family:    Verdana,Tahoma,Arial;
}

#content
{
width:          800px;
border:         solid 1px #000000;
margin-top:     20px;
margin-left:    auto;
margin-right:   auto;
}

div.foo
{
display:  inline;
min-width:  250px;
width:   250px;
border:   dotted 1px #b8b8b8;
padding:  0px 15px 0px 0px;
vertical-align: middle;
}

.foo .id
{
display:  none;
}

.foodata
{
    display:  inline;
    text-align:  left;
    white-space: nowrap;
    margin:   2px 2px 2px 2px;
}


.fooname
{
    display:  inline;
    min-width:  80px;
    font-weight: bold;
    font-size:  12px;
    white-space: nowrap;
}

.foomodel
{
    display:  inline;
    min-width:  80px;
    color:   #000000;
    font-size:  12px;
}

.foocounts
{
    min-width:   90px;
    text-align:   right;
    display:   inline;
}

.foosiblings
{ /* add in image for children */
    background:   url(../../images/siblings.png) no-repeat 4px 10%;
    text-align:   right;
    font-size:   12px;
    min-width:   50px;
    display:   inline;
}

.fookids
{ /* add in image for connection */
    background:   url(../../images/kids.png) no-repeat 4px 25%;
    text-align:   right;
    font-size:   12px;
    min-width:   50px;
    display:   inline;
}

.fooimage
{
    display:   inline; 
    vertical-align:  middle;
}

</style>
</head>
<body>

<div id="content" >
<div class="foo" >
    <span class="id" >12345</span>
    <a href="" class="foolink" >
        <img src="" alt="XX" class="fooimage" height="16" width="16" />
        <span class="foodata" >
            <span class="fooname" >Brad</span>
            <span class="foomodel" >(human)</span>
        </span>
        <span class="foocounts" >
            <span class="foosiblings" >(3)</span>
            <span class="fookids" >(2)</span>
        </span>
    </a>
</div>

<div class="foo" >
    <span class="id" >12345</span>
    <a href="" class="foolink" >
        <img src="" alt="XX" class="fooimage" height="16" width="16" />
        <span class="foodata" >
            <span class="fooname" >Tom</span>
            <span class="foomodel" >(human)</span>
        </span>
        <span class="foocounts" >
            <span class="fookids" >(1)</span>
        </span>
    </a>
</div>

<div class="foo" >
    <span class="id" >12345</span>
    <a href="" class="foolink" >
        <img src="" alt="XX" class="fooimage" height="16" width="16" />
        <span class="foodata" >
            <span class="fooname" >Harry</span>
            <span class="foomodel" >(human)</span>
        </span>
        <span class="foocounts" >
            <span class="foosiblings" >(6)</span>
        </span>
    </a>
</div>

<div class="foo" >
    <span class="id" >12345</span>
    <a href="" class="foolink" >
        <img src="" alt="XX" class="fooimage" height="16" width="16" />
        <span class="foodata" >
            <span class="fooname" >Sally</span>
            <span class="foomodel" >(human)</span>
        </span>
        <span class="foocounts" >
        </span>
    </a>
</div>

<div class="foo" >
    <span class="id" >12345</span>
    <a href="" class="foolink" >
        <img src="" alt="XX" class="fooimage" height="16" width="16" />
        <span class="foodata" >
            <span class="fooname" >Peggy</span>
            <span class="foomodel" >(human)</span>
        </span>
        <span class="foocounts" >
            <span class="fookids" >(12)</span>
            <span class="foosiblings" >(16)</span>
        </span>
    </a>
</div>
</div>

</body>
</html>

重要的是我想将整个 foo 放在一起，放在一个大块中，因为我在整个页面上都使用了这个结构。如果需要，foo 的结构可以更改，我可以完全控制它。

最佳答案

white-space:nowrap 样式确实可以防止“foo”div 损坏，但我也发现它会导致它们超出“content”div 中定义的宽度。

我发现以下内容适用于 IE、Firefox 和 Chrome(仅限 pc，目前无法访问 Mac)

div.foo
{
    display:inline-block;
}

关于html - CSS 格式保持一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1910217/

25

4

0

文章推荐： html - 我怎样才能用ie6测试我的网站

文章推荐： Git: merge 一个分支但没有一些我只需要在本地修改的文件？

文章推荐： git - 如何从 git 中已推送的分支中删除所有提交？

文章推荐： gitolite 和文件权限

c# - 保持字典的 Where() 一致
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Recreating a Dictionary from an IEnumerable 在 Dictiona
imagemagick - 是否可以修剪图像并强制其尺寸与 ImageMagick 一致？
是否可以使用命令行版本的 ImageMagick 修剪图像(比如带有 alpha 的 PNG)，使输出图像的宽度和高度都是偶数(不是奇数)？准确地说，应该先修剪输出图像，然后用透明像素填充。我需要这
java - 保持数据结构 View 一致
我有一个订单的Map，可以由许多不同的线程访问。我想控制访问，所以考虑以下简单的数据结构+包装器。 public interface OrderContainer { boolean cont
css - 我如何使我的导航与 Logo 一致？
我有以下代码，现在只是 div 中的一个 Logo ，但我正在尝试添加一些导航单元格，稍后我将对其进行样式设置。问题是，我似乎无法让它们与(除此之外) Logo “一致”，它们总是下降到下一行。我做错
java - 一致 UI 的设计模式
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this qu
javascript - 使用种子值在刷新之间保持 d3-cloud 一致？
有没有办法将种子值传递给 d3-cloud 或其他基于 javascript 的标签云，以使其在页面加载之间保持一致？我们的客户希望使用标签云作为导航/发现辅助工具，但由于 d3-cloud 会在每
javascript - 路径长度变化时保持 stroke-dasharray 一致
我有一条由用户使用 D3.js 绘制的路径。我想在我的用户绘制路径上定义一个破折号数组，但是，随着它改变其形状和长度，破折号的行为不一致并且间隙在移动并变得越来越小。这是一个代码笔: https:
ios - UIStatusBar 风格与 UINavigationBar 一致
只是为了研究UINavigationBar和UIStatusBar的UI，我把Navigation Bar Style改成了Black，并且取消勾选Bar visibility，即Shows Navi
macos - 一致 "-repeat watch"不工作
我最近在我的家用机器 (OSX 10.9) 和我的远程服务器 (Ubuntu 12.04 64 位) 上安装了 unison。我在这两个地方都安装了 2.40.102 版本。我在我的 Mac 上使用
python - 测试数据库迁移结果是否与(ORM)一致？楷模
我正在使用 migrate 创建 SQL 数据库模式并用初始数据填充它。后来使用 SQLAlchemy 来处理这个数据库。我如何测试我的 SQLAlchemy 模型是否与 migrate 生成的真实
html - 图像与文本 HTML CSS 一致
道歉对这一切来说还是新鲜事。我正在创建一个网页，并在两个单独的 div 中将图像和文本并排放置。我已经设法将它们放在页面上我想要的位置，但是当我调整页面大小时，文本会调整大小，但图像不会。我希望文本底
cassandra - 为什么 Cassandra 不一致而 HBase 一致？
在翻阅Cassandra和HBase的阅读资料时，我发现Cassandra并不一致，但HBase是一致的。没有找到任何合适的阅读 Material 。有人可以提供有关此主题的任何博客/文章吗？最佳
objective-c - 如何计算文件夹的大小。 (此尺寸必须与 Finder 一致。)
我需要计算 MacOS 中文件夹的大小。该尺寸值必须与 Finder 一致。我尝试了几种方法来做到这一点。但结果总是与Finder不同。以下方法是我尝试过的。 typedef struct{
c++ - 如何保证 C++ 模板类特化之间的接口(interface)一致？
问:我可以使用 C++ 中的任何编译时机制来自动验证模板类方法集是否从类特化到特化相匹配？示例:假设我想要一个类接口(interface)，它根据模板值专门化具有非常不同的行为: // forwar
python - SelectKBest 与 GaussianNB 结果不精确/一致
我想使用 SelectKBest 选择前 K 个特征并运行 GaussianNB: selection = SelectKBest(mutual_info_classif, k=300) data_t
html - 有没有最好的方法来证明 h1 文本与其包含的 div 一致？
我想要一个位于页面中央的 div，其中包含一行(两个单词)的 h1 文本，并且该文本与 div 的长度对齐；意思是，字母留出空间(同时保持它们的大小)以占据 div 的整个宽度，并且不要超出 div。
php - 更新 Ubuntu 服务器错误后与 apache 一致
我试图更新我的服务器，所以我通过 ssh 运行以下命令: sudo do-release-upgrade 我收到以下错误: Errors were encountered while processi
opencv - 我如何计算 SVD 并验证第一个奇异值与最后一个奇异值的比率是否与 OpenCV 一致？
我想验证单应矩阵会给出好的结果，而这个 this answer 有答案 - 但是，我不知道如何实现答案。那么谁能推荐我如何使用 OpenCV 计算 SVD 并验证第一个奇异值与最后一个奇异值的比率是
ios - CocoaPod 规范不会与 0.36 一致
我最近更新到 cocoapods 0.36 并对内部规范做了一些更改，现在 podspec 不再有效。我用 0.35 验证了此规范的先前版本 (0.3.8)，但使用 0.36 失败。很明显 cocoa
ios - 滚动第二个 UITableView 与第二个 UITableView 一致
我有两个并排设置的 TableView ，我需要它们同时滚动。因此，当您滚动一个时，另一个也会同时滚动。我进行了一些搜索，但找不到任何信息，但我认为这一定是有可能的。我的 TableView 都连

首页

博学

6Ren·AI

商城

html - CSS 格式保持一致