使用可用的寬度與css

我有一個特例。我想要一個div使用可用的寬度。使用可用的寬度與css

這是我的代碼：

.parent { 
 
    width: 100%; 
 
} 
 
.child-left { 
 
    width: 66%; 
 
    float: left; 
 
} 
 
.child-right { 
 
    width: 33%; 
 
    min-width: 400px; 
 
    float: right; 
 
}

<div class="parent"> 
 
    <div class="child-left"> 
 
    Lorem Ipsum 
 
    </div> 
 
    <div class="child-right"> 
 
    Lorem Ipsum 
 
    </div> 
 
</div>

的元件應該是最小400像素的寬度。如果我調整屏幕的大小，就會導致元素崩潰。有沒有辦法，child-left元素使用可用的水平空間？也許CSS-Flexbox？

來源

2016-09-16 susanloek

你可以將'min-width'的值設置爲'％'而不是'px'並嘗試？ –

使用媒體查詢，獲得更小的分辨率。因此，在特定分辨率下，您可以更改各個元素的屬性。 – Samir

這不是一個選項。 '孩子右'必須是400px最小寬度！ – susanloek

我想你可以用flex做。

.parent{ 
    display:flex; 
    justify-content: space-between; 
} 
.child-right{ 
    flex-basis: 400px; 
}

來源

2016-09-16 12:48:49

您可以使用這一招的跨瀏覽器保持兼容，沒有實現Flexbox：

.child-left { 
    width: auto; 
    overflow: none; 
} 
.child-right { 
    width: 33%; 
    min-width: 400px; 
    float: right; 
}

請注意，你必須首先把你的右孩子在HTML中。 .child-right中的float: right;使div只能與下列元素一起浮動。如果你把它放在.child-left之後，它就不會在它旁邊浮動。

<div class="parent"> 
     <div class="child-right"> 
     Lorem Ipsum 
    </div> 
    <div class="child-left"> 
     Lorem Ipsum 
    </div> 
</div>

在操作中查看：https://jsfiddle.net/4s3oecrp/

此外，你應該刪除你的CSS樣式爲.parent類。在設置了display: block;的元素（p，div，section，article，...上的默認值）上，100％寬度無用，它們會自動伸展到其全寬。

來源

2016-09-16 12:51:53

你可以用戶flex。只需添加柔性父DIV

.parent { 
    width: 100%; 
    display:flex; 
} 
.child-left { 
    width: 66%; 
    float: left; 
} 
.child-right { 
    width: 33%; 
    min-width: 400px; 
    float: right; 
} 

<div class="parent"> 
    <div class="child-left"> 
    Lorem Ipsum 
    </div> 
    <div class="child-right"> 
    Lorem Ipsum 
    </div> 
</div>

爲更好的學習爲 http://www.w3schools.com/cssref/css3_pr_flex.asp

來源

2016-09-16 12:54:52

因爲您要使用的可用空間爲child-left，而不是讓換到一個新的生產線，採用一個flexbox是理想的位置：

取出花車和添加display: flex到parent。
添加flex: 1到child-left它自動調整自由空間。使用flex: 0 1 400px這意味着元件將只與的400像素一個flex-basis收縮的min-width
集。

.parent { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
.child-left { 
 
    flex: 1; 
 
} 
 
.child-right { 
 
    flex: 1 0 400px; 
 
}

<div class="parent"> 
 
    <div class="child-left"> 
 
    Lorem Ipsum 
 
    </div> 
 
    <div class="child-right"> 
 
    Lorem Ipsum 
 
    </div> 
 
</div>

讓我知道你在this.Thanks的反饋！

來源

2016-09-16 12:58:29 kukkuz

使用可用的寬度與css

回答

相關問題