小编use*_*300的帖子

我如何使用vertical-align,以及float在div性能？该vertical-align精品工程,如果我不使用float.但是,如果我使用浮动,那么它不起作用.对我来说,使用float:right最后一个div 是很重要的.

我正在尝试跟随,如果你从所有div中删除浮动,那么它将工作正常:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block …

我遇到嵌套循环问题.我有多个帖子,每个帖子都有多个图片.

我希望从所有帖子中共获得5张图片.所以我使用嵌套循环来获取图像,并希望在数字达到5时打破循环.下面的代码将返回图像,但似乎没有打破循环.

foreach($query->posts as $post){
        if ($images = get_children(array(
                    'post_parent' => $post->ID,
                    'post_type' => 'attachment',
                    'post_mime_type' => 'image'))
            ){              
                $i = 0;
                foreach( $images as $image ) {
                    ..
                    //break the loop?
                    if (++$i == 5) break;
                }               
            }
}

我用百分比定义了容器的宽度.我想添加一个边框(宽度右侧3px),因为容器宽度是%,而边框宽度是px,我该如何调整容器的宽度？

<div class="wrap">
  <div class="left">...</div>
  <div class="right">...</div>
</div>

.wrap{
    width:100%;
}

.left{
    width:30%;
}

.right{
    width:70%;
}

我想在.left的右侧添加3px边框.例如:

.left{
    width:30%;
    border:3px solid #000;
}

由于我在%中定义了宽度,因此重新调整.left宽度的最佳方法是什么.我可以粗略地将宽度减小到29%,但我想要做到精确.

我想通过单击其中的关闭链接或通过单击该div之外的任何位置来隐藏div.

我正在尝试关注代码,它通过正确单击关闭链接打开并关闭div,但如果我有问题通过单击div之外的任何位置关闭它.

$(".link").click(function() {
  $(".popup").fadeIn(300);
}

);
$('.close').click(function() {
  $(".popup").fadeOut(300);
}

);
$('body').click(function() {
  if (!$(this.target).is('.popup')) {
    $(".popup").hide();
  }
}

);

<div class="box">
  <a href="#" class="link">Open</a>
  <div class="popup">
    Hello world
    <a class="close" href="#">Close</a>
  </div>
</div>

演示: http ://jsfiddle.net/LxauG/

在下面的HTML中,div .left和.right具有不同的高度.是否可以在不定义高度的情况下使两个div具有相同的高度.我尝试过使用display:table但不起作用.

HTML:

<div class="wrap">

    <div class="left">
       Lorem    
    </div>

    <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>

</div>

CSS:

.wrap{
    overflow:hidden;
    width:250px;
    display: table;
    border-collapse: collapse;
}


.left{
    width:100px;
    float:left;
    display: table-cell;
    border-bottom:1px solid green;    
}


.right{
    width:150px;
    float:left;
    border-bottom:1px solid red;
    display: table-cell;     
}

jsfiddle: http ://jsfiddle.net/fJbTX/1/

如果ul有多个类的li项,是否可以使用:last-child获取特定类的最后一项？

例如,请考虑以下事项:

<ul class="test">
    <li class="one">
    <li class="one">
    <li class="one">
    <li class="two">
    <li class="two">
</ul>

我想为最后一个具有"one"类(即列表中的第三个)的li添加一些样式.

我试过跟随,它不起作用.

ul.test li.one:last-child 

我使用以下代码为不同颜色的2个边框和边框之间的空格.我正在使用该属性outline-offset作为边界之间的空间.但是在IE中不支持它(甚至不是IE9).有没有任何替代解决方案在IE中工作,而不在HTML中添加另一个div.

HTML:

<div class="box"></div>

CSS:

.box{
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
    outline:2px solid red;
    outline-offset: 2px;    
}

高度和宽度不固定,我刚刚用于示例.

JSFiddle: http ://jsfiddle.net/xyXKa/

我已经设置overflow:hidden了一个容器.我想为容器内部的元素设置绝对位置,以便它显示在容器外部,但是隐藏溢出不会让它显示.

对我来说,使用overflow:hidden容器是很重要的,因为我在容器中有很多元素.反正有没有让它与overflow:hidden？

它的父元素wrap是body标签,根据它很难确定位置.

HTML:

<div class="wrap">
    <div class="box">
        <span>Left</span>
        <div class="main"></div>
    </div>    
</div>

CSS:

.wrap{
    width: 500px;
    margin: 50px auto;
    border: 1px solid green;
    overflow: hidden;    /*causes the problem */
}

.box{
    position: relative
}

.main{
    width: 100px;
    height: 100px;
    background: green;
}

span{
    position: absolute;
    left: -50px;
}

演示: http ://jsfiddle.net/c55hS/

我想在两个数字之间添加一个大斜线,以获得输出,如下图所示:

我试图用来/添加斜杠,但它做得不对(它显示在数字之后,而不是在数字之下).反正有没有让输出接近上面的图像？

<div class="box">
    <span class="top">41</span>
    <span class="line">&#47;</span>
     <span class="bottom">50</span>
</div>

.top {
    font-size: 100px;
    font-weight: bold;
}

.line {
    font-size: 100px
}

JSFiddle: http ://jsfiddle.net/jxk8fvus/

在以下示例中,标题文本位于多行上.是否有可能在每一行上添加左右填充(当然,不将每个单词包装在不同的元素中)？

如果只能用CSS来实现,可以用jQuery完成吗？

HTML:

<div class="wrap">
<h1>Donec commodo sapien lectus, nec gravida magna</h1> 
</div>

CSS:

.wrap{
    width: 100px;
}

h1{
    display:inline;
    background:green;
    color:#fff;
}

演示: http ://jsfiddle.net/289oo48b/