草庐IT

css - 一个内联 Div 移动到低于 rest

coder 2023-08-08 原文

<div class='noshop-products-div'><div class='noshop-products' align='center'> 

<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiver.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver DVD -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverdvd.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver DVD</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver CD -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgivercd.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver CD</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver Workbook -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverworkbook.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver Workbook</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver for Teens -------------------- --> 
<div class='noshop-product '> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverteens.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Teens</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 


<!-- -------------------- NoShop Item: The Dream Giver Library / The Dream Giver for Parents -------------------- --> 
<div class='noshop-product last-product'> 
    <div class=noshop-product-imagebox  width=83 style="width:83px;" > 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><img class=noshop-product-image  width=83 style="width:83px;"  src="./wp-content/themes/mingle-theme/parallelus-mingle/assets/images/skins/skin-7/bw/products/dreamgiver/dreamgiverparents.png" /></a> 
    </div> 
    <div class=noshop-product-textbox> 
        <a href="http://jesper.angelo.net/wordpress/noshop/" /><div class=noshop-product-title>The Dream Giver for Parents</div></a> 
        <div class=noshop-product-desc> 
            &nbsp;
        </div> 
        <div class=noshop-product-subtable> 
            &nbsp;
        </div> 
    </div> 
</div> 
</div><!--End Products DIV -->

/* No Shop Categories */ 
.The_Dream_Giver_Library {
    background: #cf2426;
    background: -moz-linear-gradient(top, #cf2426 0%, #ac1e1f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cf2426), color-stop(100%,#ac1e1f));
    background: -webkit-linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
    background: -o-linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
    background: -ms-linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf2426', endColorstr='#ac1e1f',GradientType=0 );
    background: linear-gradient(top, #cf2426 0%,#ac1e1f 100%);
}

/* No Shop Products */
.noshop-category {
    color: #fff;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 5px;
    text-align: center;
    padding-top: 3px;
    font-weight: bold;
    font-size: 18px;
    height: 30px;
    -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    border: 1px solid rgba(0,0,0,0.4);
}
.noshop-products-div {
    margin: 0 auto;
    text-align: center;
}
.noshop-products {
    margin: 0 auto;
    height: 190px;
    background: #fefefe;
    background: -moz-linear-gradient(top, #fefefe 0%, #d3d3d3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#d3d3d3));
    background: -webkit-linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    background: -o-linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    background: -ms-linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d3d3d3',GradientType=0 );
    background: linear-gradient(top, #fefefe 0%,#d3d3d3 100%);
    -webkit-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    -moz-box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, .3);
    border: 1px solid rgba(0,0,0,0.4);
    margin-top: 10px;
    display:-moz-inline-stack;
    display:inline-block;
    text-align: cente;
}
.noshop-product {
    display:-moz-inline-stack;
    display:inline-block;
    width: 115px;
    height: 170px;
    margin: 10px 0px;
    border-right: 1px solid #939598;
}
.last-product {
    border-right: none;
}
.noshop-product-imagebox {
    margin: 0 auto;
    width: 83px;
}
.noshop-product-imagebox img {
    height: 115px;
}
.noshop-product-textbox {
    text-align: center;
    padding: 0px 15px;
}
.noshop-product-textbox a, .noshop-product-textbox a:visited, .noshop-product-textbox a:link {
    color: #000;
    font-size: 10px;
    font-weight: bold;
}

最佳答案

你只需要这个:

.noshop-product {
    vertical-align: top
}

你的问题有两个原因:默认的vertical-alignbaseline另一个里面的文字。 noshop-product 都有两行文本。

关于css - 一个内联 Div 移动到低于 rest,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7353251/

有关css - 一个内联 Div 移动到低于 rest的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容?我基本上想做类似numbers.slice(0,3)的事情,但要删除切片中的数组项。嗯...嗯,我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组,我们在StackOverflow上找到一

  2. ruby - 使用 Vim Rails,您可以创建一个新的迁移文件并一次性打开它吗? - 2

    使用带有Rails插件的vim,您可以创建一个迁移文件,然后一次性打开该文件吗?textmate也可以这样吗? 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件,这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails,您可以创建一个新的迁移文件并一次性打开它吗?,我们在StackOverflow上找到一个类似的问题: https://sta

  3. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前,我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它,但这似乎不是“ruby方式”,我将需要在不久的将来访问更多模型。这可能会变得很脏,是否有针对这种情况的任何技术?注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展,本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向,这似乎很麻烦。最终从任何

  4. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  5. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller,client和test_client。客户端Controller已经构建,我想创建一个test_clientController,我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集,然后呈现客户端Controller的索引View,以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  6. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  7. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串? - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串?SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复?

  8. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序,我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是,在make_tires内部有一个错误,如果我为Tire尝试它,则没有用于创建或新建的activerecord方法。当我检查轮胎时,它没有这些方法。我该如何补救?错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发,它们都因相同的错误而失败。 最佳答案

  9. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索,因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索?require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  10. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时,API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名,以便它在GitHub上正确呈现。更好的是,我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作?是否有某个地方可以查找可以修改的主页文件的名称?还是我必须编写一个新的Rake任务?额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么?为什么不只有一个?

随机推荐