相关疑难解决方法(0)

鉴于此HTML和CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

结果,SPAN元件之间将存在4像素宽的空间.

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

我理解为什么会发生这种情况,而且我也知道我可以通过删除HTML源代码中SPAN元素之间的空白来摆脱那个空间,如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

但是,我希望CSS解决方案不要求HTML源代码被篡改.

我知道如何用JavaScript解决这个问题 - 通过从容器元素(段落)中删除文本节点,如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示: http ://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用CSS解决吗？

我想将一个div添加到另一个div中.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

这是我目前使用的CSS.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

正如你所看到的,我现在使用的方法取决于宽度和高度的值innerDiv.如果宽度/高度发生变化,我将不得不修改margin-top和值.margin-left是否有任何通用的解决方案,我可以用它来居中,innerDiv无论是什么它的大小？

我发现使用margin:auto可以将innerDiv水平对齐到中间.但是垂直中间的那个呢？

如何将div并排放置,其中一个div('contentwrapper')响应浏览器的大小调整.

HMTL

<div id="maincontainer">
<div id="leftcolumn">&nbsp;</div>

<div id="contentwrapper">&nbsp;</div>
</div>

CSS

#maincontainer {
    width:100%;
    height: 100%;
}

#leftcolumn {
    display:inline-block;
    width: 100px;
    height: 100%;
    background: blue;
}

#contentwrapper {
    display:inline-block;
    width:100%;
    height: 100%;
    background-color: red;
}

JSFIDDLE http://jsfiddle.net/A5HM7/

抱歉，如果它是重复的，我已经诚实地搜索过，但我仍然遇到这个小提琴中显示的问题：http ://jsfiddle.net/tfvdzzee/1/

代码在这里：

html

<div id="wrap">
    <div id="one">1</div>
    <div id="two">2</div>
</div>

CSS

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}
#one, #two
{
    width: 50%;
    background: green;
}
#two
{
    float: right;
    background: red;
}

我试图检查Bootstrap 4中的"按钮"示例.它们有一个看起来很漂亮的按钮,如下所示:

http://getbootstrap.com/docs/4.0/components/buttons/

但我不明白,按钮之间的空间来自哪里.

这不是边距,不是柔性框对齐,不是透明边框.那么,它是如何工作的？实际上,我禁用了dev-tools中的所有样式,但该空间并没有消失.

我有一个用例,我想在CSS中绘制矩形.我需要它们看起来像这样:

我已经设法得到更小更高的盒子,但无法弄清楚如何绘制掉落在线下的那些盒子.这是一个小提琴

继承人我的HTML:

<div class="word">
    <p class="letter taller"></p>
    <p class="letter"></p>
    <p class="letter"></p>
    <p class="letter hanging"></p>
    <p class="letter"></p>
    <p class="letter taller"></p>
    <p class="letter"></p>
</div>

到目前为止这是我的CSS:

p {
    display: inline-block;
}
.letter {
    padding 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 2em;

}
.taller {
    height: 4em;
}

.hanging {
 /* not sure what to implement here */
}

我的HTML

<div id="wrapper">
    <div id="div1">The two divs are</div>
    <div id="div2">next to each other.</div>
</div>

我的CSS

#wrapper {
    border: 1px solid blue;
}
#div1 {
    display: inline-block;
    width:49%;
    height:120px;
    border: 1px solid red;
}
#div2 {
    display: inline-block;
    width:49%;
    height:160px;
    border: 1px solid green;
}

一个JSFiddle

所以,当你看到每个div的宽度是49%时,这是我让它工作的唯一方法.如果将每个的宽度设置为50%,则div不会再显示为彼此...为什么？