Html 用Css对齐某些东西_Html_Css

Html 用Css对齐某些东西

html css

Html 用Css对齐某些东西,html,css,Html,Css,我刚开始研究html/css，在了解布局引擎的工作原理时遇到了一些问题我来自c#背景，任何带有硬编码宽度/高度的东西都会让人觉得有什么不对劲。我发现的第一件事是，无法以合理的方式使div扩展以填充其可用高度，因此我一直在使用表我想要的UI基本上是一个网格，它是带有侧面板的页面的主要部分。其想法是使用箭头键在网格中导航，然后使用侧面板为单元格选择选项-这是一个相当简单的主/细节我很高兴使用表格来分隔两列，但我遇到的问题是侧面板：我想在顶部有一个搜索框。当您在搜索框中键入内容时，它会自动完成

我刚开始研究html/css，在了解布局引擎的工作原理时遇到了一些问题

我来自c#背景，任何带有硬编码宽度/高度的东西都会让人觉得有什么不对劲。我发现的第一件事是，无法以合理的方式使div扩展以填充其可用高度，因此我一直在使用表

我想要的UI基本上是一个网格，它是带有侧面板的页面的主要部分。其想法是使用箭头键在网格中导航，然后使用侧面板为单元格选择选项-这是一个相当简单的主/细节

我很高兴使用表格来分隔两列，但我遇到的问题是侧面板：

我想在顶部有一个搜索框。当您在搜索框中键入内容时，它会自动完成，向您显示与刚才键入内容相关的选项

我遇到的第一个问题是搜索框不在网格中单元格的顶部。所以我用了：

position: absolute;
top: 0;

对于td中设置了

位置：相对的

然后我在单元格内使用另一个div
来布局结果。这很好，但搜索框会遮挡第一项
然后我尝试将搜索框更改为具有display:block
，这解决了问题，但意味着当没有搜索结果时，搜索框没有顶部对齐
似乎使用显示
和位置
属性是相互排斥的，那么如何以合理的方式实现这一点呢
一种选择似乎是什么都用表格，这有什么不对吗

#主布局
{
宽度：100%
}
#旋转选择面板
{
/*可见性：隐藏*/
宽度：30%；
身高：100%；
背景色：马鞍色；
/*这是为了允许使用“绝对”在该元素内定位*/
位置：相对位置；
}
#旋转搜索箱
{
最小高度：20px；
最大宽度：200px；
最小宽度：100px；
显示：块；
/*或
位置：绝对位置；
排名：0；
*/
}
这是您可以使用的基本结构
<body>
  <!-- This is a wrapper that controls the total height and width of page elements -->
  <div id="mainLayout"> 

    <!-- You can position the elements however you would like. -->
    <div id="leftColumn"> ...Code goes here... </div>
    <div id="searchBar"> ...Code goes here... </div>
    <div id="rightColumn"> ...Code goes here... </div>
  </div>
</body>

这将创建一个随窗口缩放的布局，并为您提供一个左栏和一个右栏，其上方有一个搜索栏。显然，如果你知道你想要的元素的大小，你可以简单地设置它们。
我不喜欢（实际上）使用浮动，所以这是我在布局上的方法：
我不确定您是否想要一个左列，但我已经添加了一个供您选择：

.left、.nav、.right、.content{
显示：内联块；
位置：绝对位置；
位置：绝对位置；
}
html，
身体{
保证金：0；
填充：0；
}
.导航{
宽度：75%；
背景：浅灰色；
高度：100px；
排名：0；
左：0；
}
.左{
宽度：20%；
顶部：100px；
左：0；
背景：暗射线；
高度：计算（100%-100px）；
}
.对{
宽度：25%；
排名：0；
右：0；
背景：灰色；
身高：100%；
}
.内容{
宽度：55%；
高度：计算（100%-100px）；
背景：浅蓝色；
顶部：100px；
左：20%；
}
#搜寻{
位置：相对位置；
宽度：90%；
利润率：2%；
}
我将沿着顶部走大部分路
我将是左边的一列


我将成为右边的一个专栏
我将是一个内容
请不要使用表格进行布局。请不要这样做。使用表格是允许的，但它被认为是丑陋和过时的，并且是更流行的页面布局方法。通常用于创建相同但更可控的结构。要使搜索栏与页面顶部齐平，只需将搜索栏移动到右栏上方即可。您可能想了解位置
样式的工作原理：@jbutler483我在其他地方看到过类似的表达，为什么会这样？@jonnyleds:当您试图用css“突破边界”时，表格式的布局会让人产生恶梦。此外，表格是为一件事设计的——表格数据。不是布局。因此，使用DIV和定位的重要性受到了极大的强调。我会避免浮动元素，尽管这更符合个人偏好。使用定位
和显示css属性要容易得多。@jbutler483您能提供一个如何实现这一点的示例吗？@sring感谢您的回复。这很有效，我可以看到这里发生了什么谢谢，看到另一种做事方式肯定很有用。还没有机会好好地处理它。。。我以前没去过加州，看起来useful@JonnyLeeds：示例就是这样的：示例：如果你只接触css，我建议你（a）避开浮动元素，（B）避开引导-我使用过它，也讨厌它，而且每天都会有100个关于它的问题发布。谢谢。是的，我不太喜欢库/框架——我认为你应该在使用它们之前了解它们正在解决的问题，因为它们总是要付出代价的。顺便说一句，我没有投你反对票——我已经投了赞成票——谢谢你的支持help@JonnyLeeds：我没用过图书馆？Css用于描述用标记语言编写的文档的外观和格式是的，我知道你警告不要使用bootstrap，我同意你的观点-在我使用Css之前，我想先了解一下Css/为我做点什么
#mainLayout {
    width:100%
    height:100%;
}
#leftColumn {
    width:75%;
    height: 100%;
    float:left;
}
#searchBar{
    width:25%;
    height: 10%;
    float:left;
}
#rightColumn {
    width:25%;
    height: 90%;
    float:left;
}