Question

我在一个容器中有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>

Answer 1

问题是

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

因为#container的给定值为498px。因此，如果.left{width} + .right{width}超过498像素，您的布局就会中断。

这是一个小提琴，其宽度为290px; （你可以做298px）也.right可以漂浮到左边。（浮动右边不能在旧浏览器中工作..）

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

Answer 2

使用clear：both属性

然后使用float属性并将一个容器浮动到右侧

使用margin-right属性

然后使用padding属性使容器彼此相遇并使用text wrap属性并将其设置为normal，它应该没问题。

文字没有包装在右边的div中

2 个答案: