Question

我不知道如何在html中完成以下操作，我更愿意，如果解决方案是严格的html + css，javascript / jquery正在网站上使用，但我不喜欢我的布局依赖在javascript上。

A部分是一个不确定宽度的列表，它从数据库中的数据填充，因此它可以是9em-15em宽度。 B部分也有溢出的文本。我希望A占用所需的宽度来显示其内容，然后我希望B部分占据宽度的其余部分。

这是可能的，如果是这样的话怎么样？你知道有什么好书可以给我一个很好的基础html + css

---------------------------------------------
|          |^|                             |^|
|          | |                             | |
|          | |                             | |
|          | |                             | |
|    A     | |             B               | |
|          | |                             | |
|          | |                             | |
|          | |                             | |
|          | |                             | |
|          | |                             | |
|          |v|                             |v|
----------------------------------------------

这就是我目前所拥有的，但是如果B部分溢出则会强制“A”列表缩小，使div变为两行，这是不可接受的。

<div id="SectionA" style="float:left">
 <div>Just TEst data</div>
 <div>Just data</div>
 ...
 <div>Just data</div>
</div>
<div id="SectionB" style="float:left">
  <!-- A bunch of content here -->
</div>

Answer 1

以另一种方式看待它：

<div id="SectionB">
 <div id="SectionA">
  <div>Just TEst data</div>
  <div>Just data</div>
  ...
  <div>Just data</div>
 </div>
 <!-- A bunch of content here -->
</div>

div#SectionA {max-width:15em; float:left;}

div#SectionB {width:100%;}

这应该可以完美地运作

Answer 2

    <div id="SectionA" style="float:left;width:auto;max-width:NUMBERpx">
 <div>Just TEst data</div>
 <div>Just data</div>
 ...
 <div>Just data</div>
</div>
<div id="SectionB" style="float:left;width:auto;max-width:NUMBERpx">
  <!-- A bunch of content here -->
</div>

也许这可以起作用

Answer 3

<style>
#sectiona{
float:left;
overflow:auto}
#sectiona>div{
white-space:no-wrap}

</style>

<div id="sectiona" style="float:left">
 <div>Just TEst data</div>
 <div>Just data</div>
 ...
 <div>Just data</div>
</div>
<div id="sectionb" style="float:left">
  <!-- A bunch of content here -->
</div>

我认为这应该有用。

您的示意图显示了具有相同高度的列。仅使用css很难实现

Answer 4

如果我错了，请纠正我，但你的方案似乎需要每个部分的独立滚动条，类似于之前HTML生成的框架。如果是这样，您将需要父容器div用于具有固定高度的两个部分，并将两个部分的高度设置为100％。

<style>
#frameset {
  background-color: lightBlue;
  position: absolute; /* this is my way of emulating frameset */
  bottom: 0; /* you can specify height instead if you're */
  top: 0;   /* not using absolute positioning */
  left: 0; right: 0;
}
#menu, width {
  width: auto;
  height: 100%;
}
#menu {
  background-color: bisque;
  max-width: 15em;
  float: left;
  overflow-y: scroll; /* feel free to change to auto, but remember:
   scrollbar is appended from inside. If you use script to change its
  content, sentences that previously just fit in one line may suddenly need
  a line break in the middle when the scrollbar appears */
}
#content {
  overflow-y: auto;
}
</style>

<div id="frameset">
  <div id="menu">aaaaaaaaaaa</div>
  <div id="content">b</div>
</div>

Answer 5

我会给这个人一个机会：

<!DOCTYPE html>
<head>
    <title>Testing Columns</title>
    <style type="text/css">
    #a { float: left; }
    #b { overflow: hidden; }
    </style>
</head>
<body>
<div id="a">
    <ul>
        <li>This is</li>
        <li>Some variable width</li>
        <li>content</li>
        <li>for testing</li>
        <li>stuff</li>
    </ul>
</div>
<div id="b">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris erat, porta et pulvinar vel, iaculis sed arcu. Vestibulum non eros quis eros congue scelerisque in sed tortor. Vivamus scelerisque, lorem auctor faucibus tempor, magna diam porttitor leo, vel tempor elit sapien accumsan mauris. Sed interdum est at elit cursus euismod. Donec et erat est, non molestie urna. Nam sollicitudin turpis in nunc viverra tempus. Mauris gravida viverra massa vitae ornare. Integer interdum aliquam viverra. Vivamus ut libero elit, at semper ligula. Sed iaculis risus ut ligula molestie tincidunt. Ut ac felis libero, aliquam mattis tellus. Proin non massa a odio bibendum laoreet in eu ligula. Aliquam ac elit a nisl laoreet commodo. Integer ullamcorper tempor mauris in adipiscing. Suspendisse ultrices enim vel orci adipiscing tincidunt. Praesent justo dui, ullamcorper ut venenatis posuere, molestie in arcu. Sed libero justo, facilisis sit amet luctus sit amet, cursus vel leo.</p>
    <p>Curabitur quis felis sit amet enim congue euismod vel a nibh. Sed auctor justo in nulla ullamcorper malesuada. Duis eu purus nec quam ornare congue vitae vel dui. Cras faucibus suscipit tincidunt. Nunc rutrum pretium diam ac venenatis. Proin non dui ligula, quis eleifend massa. Phasellus condimentum fringilla velit. Sed aliquet sodales tortor, ut pharetra mauris imperdiet vel. Etiam tempor augue non felis fermentum varius. Praesent facilisis condimentum commodo. Ut mollis tristique eros, non dapibus enim sollicitudin quis. In hac habitasse platea dictumst. Maecenas enim nibh, sollicitudin sit amet adipiscing vitae, aliquet pretium dui. Vivamus lacus quam, fermentum eget adipiscing et, malesuada eget urna.</p>
</div>
</body>
</html>

非常简单。 #a在没有指定的witdh的情况下浮动，因为它的内容有宽度。由于#b，#a不会侵占overflow: hidden的空间。此解决方案在IE中不能使用7。

Answer 6

我会使用一些CSS来

.a {

float：left;

}

b会写一个。

根本不控制宽度，它会自动将自己设置为从数据库返回的信息的正确宽度。

控制高度，以确保b不会潜入a。

带溢出的html + css动态宽度

6 个答案: