文本不包裹在正確的格

我在一個容器中有2個div，但是當我調整我的瀏覽器的大小時，正確的div不包裹文本以修復調整後的瀏覽器大小。我如何獲得正確的div來包裝文本？文本不包裹在正確的格

#container { 
    width: 498px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -150px; /* Half of width */ 
    margin-top: -50px; /* Half of height */ 
    word-wrap: break-word; 
    overflow: visible; 
    padding-left:10px; 
} 

.left { 
    float: left; 
    width: 200px; 
    text-align:left; 
    word-wrap:break-word; 
} 

.right { 
    float: right; 
    width: auto; 
    text-align:left; 
    position:relative; 
    word-wrap: break-word; 
    overflow: auto; 
} 
</style> 
</head> 

<body> 
<div id="container"> 
<div class="left"> 
<h3>For Students</h3> 
    &#8226;&nbsp;&nbsp;<a href="#savings-ambassador">Savings Ambassador</a><br> 
    &#8226;&nbsp;&nbsp;<a href="#appointment-coordinator">Appointment Coordinator</a><br> 
    &#8226;&nbsp;&nbsp;<a href="#savings-guru">Savings Guru</a> 
    </div> 
<div class="right"> 
<h3>For Graduates</h3> 
    &#8226;&nbsp;&nbsp;<a href="#director">Director, User Acquisition and Campus Events</a><br> 
    &#8226;&nbsp;&nbsp;<a href="#receptionist">Receptionist/PA</a> 
    </div> 
</div>

來源

2014-01-15 Bruce

問題是

.right { 
     /* ... */ 
     width:auto; 
     /* ... */ 
}

因爲你#container有一個從498px給出。所以如果.left{width} + .right{width}超過498px，您的佈局將會中斷。

這是一個小提琴，其中.right寬度是290px; （你可以做298px）。右邊可以浮動到左邊。（浮球就在舊的瀏覽器wan't工作..）

http://jsfiddle.net/R8fXQ/1/

來源

2014-01-15 10:26:19 caramba

我看到http://jsfiddle.net/R8fXQ/1/，並注意到如果我調整我的瀏覽器的大小，文本仍然不包裹在正確的div – Bruce

使用明確的：既財產

然後使用float屬性和float一個容器向右

使用保證金財產

然後使用填充屬性使容器彼此相遇，並使用文本環繞屬性並將其設置爲正常，並且應該沒問題。

來源

2014-01-15 10:29:47 Favouronu

請產生此代碼，所以我可能會看到它的行動（或我可以複製/粘貼） – Bruce

文本不包裹在正確的格

回答

相關問題