[css]如何讓一個元素div1的寬度由子元素的寬度決定，並超出父元素div0
這裡針對的都是block的元素
div0
div1
div1_1
div1_2
我希望做到的比較奇葩：
主要目的是使div橫排
若div0的寬度夠大，超過div1_1, div1_2的總和，則可以直接使用網上搜到的解決方案：使用float:left
在div1有一個較窄的父元素的情況下，希望div1的寬度可以由子元素撐開，超過父元素的寬度。。
div1中有並列的橫排div1_1, div1_2
如果對div1_1, div1_2使用
float: left;
將會撐不開div1，自動換行，float會失效：
目標：
block元素的預設寬度是上一個指定寬度的父元素的寬度。
若希望能動態的生成一個由內容決定的寬度（這個問題叫shrinking wrap）
有幾種做法 http://haslayout.net/css-tuts/CSS-Shrink-Wrap
比較好的做法是給div1使用css：
white-space:nowrap;/*如果沒有這一條，子元素會自動換行*/
display: table; //or inline-block
div1的子元素使用：
display: inline-block;
vertical-align: top;/*使它看起來和float:left一樣，預設是底部對齊，對於高度不一樣的子div會有影響*/
//如果使用float:left; 將會失效，無法撐寬div1，仍然是兩行
順便推薦一個不錯的線上測試網站：
http://jsfiddle.net/
html:
http://jsfiddle.net/PZT47/1
-----------------------------------
<!DOCTYPE HTML>
<html>
<head>
<style>
div{
border: 2px solid black;
margin: 5px
}
#container{
width : 200px;
height : 200px;
position : relative;
background : yellow;
overflow: visible;
}
#inncontainer{
white-space:nowrap;
display: inline-block;
background: cyan;
width: auto;
height : 190px;
}
#in1{
height:70px;
}
#in2{
height:80px;
}
.inner{
display: inline-block;
width:90px;
position : relative;
background: red;
}
</style>
</head>
<body>
<div id="container">
<div id="inncontainer">
<div id="in1" class="inner">a</div>
<div id="in2" class="inner">b</div>
</div>
</div>
</body>
</html>
參考的比較多，其他的找不到了：
http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents
相關推薦
[css]如何讓一個元素div1的寬度由子元素的寬度決定，並超出父元素div0
這裡針對的都是block的元素 div0 div1 div1_1 div1_2 我希望做到的比較奇葩： 主要目的是使div橫排 若div0的寬度夠大，超過div1_1, div1_2的總和，則可以直接使用網上搜到的解決方案：使用float:left
html、css和js原生寫一個模態彈出框，順便解決父元素半透明子元素不透明效果
script javascrip z-index htm index 彈出 rgb 特性 radi 模態框： html部分： <!-- 按鈕 --> <button id="box" onclick="pop_box()">彈出框</
CSS讓一個元素一閃一閃的
post color mes init log blog mat ani ear .heart{ animation:heart 1s ease infinite; } @keyframes heart { 0% {opacity:0.1;}
完成一個“可以由使用者鍵入文字內容，並輸出其字元個數”的Java應用程式
一、任務目標 完成一個 java application應用程式，可以接收使用者通過鍵盤輸入的文字，並輸出此段文字字元的個數。 二、Scanner類 Scanner是JDK1.5新增的一個類，可以使用該類建立一個物件。它是一個可以使用正則表示
給子盒子margin-top，自身在父盒子中未發生下移，反倒是父元素向下移動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子盒子在父盒子垂直居中&
Flex 佈局教程：語法篇 作者： 阮一峰 日期： 2015年7月10日 網頁佈局（layout）是 CSS 的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + po
網頁佈局（layout）是 CSS 的一個重點應用。 佈局的傳統解決方案，基於盒狀模型，依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。 2009年，W3C 提出了一種新的方案----Flex 佈局，可以簡
將兩個按元素值遞增次序排列的線性表歸併為一個按元素值遞減次序排列的單鏈表，並利用原來兩個單鏈表的節點存放歸併後的單鏈表
#include "stdafx.h" #include<stdio.h> #include<malloc.h> #include<stdlib.h> typed
設M 是一個m×n 的矩陣，其中每行的元素從左到右單增有序，每列的元素從上到下單增有序。 給出一個分治演算法計算出給定元素x 在M 中的位置或者表明x 不在M 中。分析演算法的時間複雜性。
#include "stdio.h" int M[5][5]= { { 1, 2, 3, 4, 5}, { 6, 7, 8, 9,10}, {11,12,13,14,15}, {16,17,18,19,20}, {21,22,23,24,25} }; int x=
Java查詢陣列重複元素，並列印重複元素、重複次數、重複元素位置
面試題查詢重複元素並列印重複次數和重複位置，一頓懵逼，回來死磕寫下來，列印指定重複次數和最大次數，其他在此基礎上可以再更新 package sort;import org.testng.annotations.Test;import sun.org.mozilla.javascript.interna
子函式呼叫父函式，父函式呼叫的方法，子函式重寫了，那麼最後父函式呼叫的是自己的方法，還是子函式的方法。
Q：子類呼叫父類的方法，父類中某個方法所呼叫的方法，子類也重寫了，那麼最後父類中的方法呼叫的是自己的方法，還是子類的方法。 A：呼叫的是子類的方法。 看程式碼： public class Parent { public void used
請使用迭代查詢一個list中最小和最大值，並返回一個tuple：# 測試 if findMinAndMax([]) != (None, None): print('測試失敗!') elif findMinAndMax([7]) != (7, 7): print('測試失敗!&
def findminmax(L): a = [] if L != a: min = L[0] max = L[0] for i in L: if min > i: min = i
請使用迭代查詢一個list中最小和最大值，並返回一個tuple
自己寫個小程式玩，程式碼實現： def findMinAndMax(L): if len(L) == 0: return (None, None) else: mi = L[0] ma = L[0] f
使用迭代查詢一個list中最小和最大值，並返回一個tuple。
Numbuer = [5,8,109,87,99,33,24,77] def findMinAndMax(Numbuer): if Numbuer !=[]: min = Numbuer[0] max = Numbuer[0] for x in Numbuer: if max
用JS新增聚焦事件，以給父元素新增邊框陰影為例
function setBoxShadow (){ $('.class').each(function () { $(this).focus(function(){ $(this).parent().css("outline","none");/*禁用瀏覽器自帶邊框陰影*/ $(t
求兩個元素遞增排列的連結串列的交集，並將其存放在某個連結串列中
#include "stdafx.h" #include<stdio.h> #include<malloc.h> #include<stdlib.h> typed
請使用迭代查詢一個list中最小和最大值，並返回一個tuple（Python）
from collections import Iterable, Iterator def g(): yield 1 yield 2 yield 3 print('Iterable? [1, 2, 3]:', isinstance(
Python 編寫程式，生成1000個隨機[20,121)之間的整數，並統計每個元素出現的次數
Python 編寫程式，生成1000個隨機[20,121)之間的整數，並統計每個元素出現的次數 練習題 2018.10.11 import random a = [random.randint(20,121) for i in range(1000)] y = s
easyui防止panel,dialog,window超出父元素邊界
var easyuiWindowOnMove = function(left, top) {//如果不在操作範圍則不移動if((top == 1 && left > 0 ) || (left == 1 && top > 0 ) ) return;var parent
解決Jquery easyui中dialog、window、panel三個元件拖動超出父元素界限問題
在網上查了一些 對於此問題的改動，發現在實際中都有一些問題(比如 有時候父元素取不到，父元素的width和height取不到)，於是在此基礎上做了修改，親測可用。 /** * 針對panel window dialog三個元件拖動時會超出父級元素的修正 * @para
資料提取：將一個整數的各個位上的數字輸出，並求和
一、分析：需要兩個類來實現即可 1，數字類：需要實現將整數的各個位上的資料輸出： 方法：將整數除以10取餘數則為末位的數字，然後整數除以10，繼續迴圈這個步驟，直到0為止 但是在輸出的時候，需要將這些數字正序輸出，則