Question

我有一个包含三个部分（div）的标题。当我调整浏览器窗口的大小时，标题元素就会换行。屏幕截图和代码如下所示：

1）HTML：

0.0.0.0

2）CSS：

<div class="container">
    <div class="header">
        <div class="header-left-part">
            <div class="header-title-left-part">
                <a href="http://www.nestro.ru/ru/" target="_blank"><img src="../../Images/Zarubezneft.png" /></a>
                &nbsp;&nbsp;&nbsp;&nbsp;<img src="../../Images/50years.png" />
            </div>
        </div>
        <div class="header-middle-part"></div>
        <div class="header-right-part">
            <div class="header-title-right-part-login">
                <a href="http://www.rvpetro.ru/" target="_blank">
                    <img src="../../Images/Rusvetpetro.png" />
                </a>
            </div>
        </div>
    </div>

如何解决？

Answer 1

请参阅此图片仅在标题类

中使用渐变

check image

<div class="container">
<div class="header">
    <div class="header-left-part">
        <div class="header-title-left-part">
            <a href="http://www.nestro.ru/ru/" target="_blank"><img src="image-1.jpg" /></a>
            <img src="50-logo.jpg" />
        </div>
    </div>
    <div class="header-middle-part">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="header-right-part">
        <div class="header-title-right-part-login">
            <a href="http://www.rvpetro.ru/" target="_blank">
                <img src="image-2.jpg" />
            </a>
        </div>
    </div>
</div>

您不能使用绝对标题和他的孩子的类似＆＃34;标题左侧部分＆＃34; ＆＃34;头 - 中 - 部分＆＃34; ，＆＃34; header-right-part＆＃34;只设计父母的绝对和他的孩子的静力学

    html, body {
    margin: 0;
    padding: 0;
    min-width: 1200px;
    width: auto !important;
}

...

.container {
    position: relative;
}

.header
{
    position: absolute;
    height: 60px;
    width: 100%;
    z-index: 110;
    left:0;
    top:0;
    white-space: nowrap;
    background: #eaaa00; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #ffdb8b, #b2a000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #ffdb8b, #b2a000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ffdb8b, #b2a000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ffdb8b, #b2a000); /* Standard syntax (must be last) */
}
.header-left-part
{   
    width: 25%;
    float:left;
}

.header-middle-part
{
    width: 50%;
    float:left;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

.header-right-part
{
    width: 25%;
    float:right;
}

如何防止元素在div中包装？

1 个答案: