Question

我需要帮助css，我有这个设置：

<div class="embedInner">
     <div class="embed_code"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sapien. Quisque risus. Ut laoreet hendreri mi.</p></div> 
     <div class="copy"><p>COPY</p></div>                     
</div>

http://jsfiddle.net/h7u8J/11/

我希望两个子div总是保持单行，左右两边，并且embed_code中的文本溢出：隐藏而不是落入新行，所以如果空间变得小于父div的宽度。< / p>

Answer 1

我改变了你的代码！

我认为这就是你想要的！ DEMO

CSS：

.embedInner{
    display:inline-block;
    position:relative;
    width:100%;
    /*background: #333;*/
}
.embed_code{
    position:relative;
    left:0;
    width:90%;
    display:inline-block;
    float:left;
    background: #333;
    overflow:hidden;
}
.embed_code p{
    padding:5px;
    margin:0;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    display:inline-block;
    white-space: nowrap;
}
.copy{
    display:inline-block
    background: #ddd;
    float:right;
    position:relative;
    right:0;
    width:10%;
    background:green;
    text-align:center;
}
.copy p{
    padding:5px;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    float:right;
}

HTML：

<div class="embedInner">
    <div class="embed_code">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et sapien. Quisque risus. Ut laoreet hendreri mi.
        </p>
    </div>
    <div class="copy"><p>COPY</p></div>
</div>

Answer 2

如果你要为父div和嵌入的div提供一定的宽度，那么你就可以达到你想要的效果。

.embedInner{
    position:absolute;
    /*background: #333;*/
    width: 100%; // newly added
}

.embed_code{
    float:left;
    background: #333;
    overflow:hidden;
    width: 90%; // newly added
}

.embed_code p{
    padding:5px;
    margin:0;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
}

.copy {
    background: #ddd;
    float:right;
}

.copy p{
    padding:5px;
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    float:right;
}

请检查它是否可以帮到你。谢谢:)）

Float divs水平

2 个答案: