我最近问了这个问题,如何设置一个容器div宽度,这样我就可以避免为宽屏显示器的用户滚动.我得到了一个很好的答案基本上将min-width与display:block ;
我现在有一个跟进.如果前面的浏览器设置为宽,但是如果首先它不宽并且用户拉伸窗口,则div容器不会改变或拉伸,接受的答案很有效.
无论如何我可以更进一步,并在浏览器窗口自身调整大小时重置div的宽度.
注意文本框如何向右扩展,直到它有足够的水平空间来容纳内容?好吧,我希望它不会扩展和适应文本与窗口中的空间.

如果窗口扩展,那么它所在的Grid.Column将展开,但文本框本身应该展开以适应.够简单吗?
有什么建议?这是我第一次涉足WPF,到目前为止,它非常流畅.
编辑:这是我的XAML标记:
<Window x:Class="GameLenseWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="Platform"
Foreground="White"
FontFamily="Georgia"
FontSize="15"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<ComboBox x:Name="cmbPlatform"
Margin="10"
FontFamily="Georgia"
FontSize="15"
MinHeight="30"
MinWidth="140"
VerticalAlignment="Center"
VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
<ComboBoxItem>All Platforms</ComboBoxItem>
<ComboBoxItem>Playstation 3</ComboBoxItem>
<ComboBoxItem>XBox 360</ComboBoxItem>
<ComboBoxItem>Wii</ComboBoxItem>
<ComboBoxItem>PSP</ComboBoxItem>
<ComboBoxItem>DS</ComboBoxItem>
</ComboBox>
</StackPanel>
<Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png"
Height="16" HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 0 10 0" />
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Margin="0 …Run Code Online (Sandbox Code Playgroud) 我正在设计一个网页表单,其中包含几个文本框和textarea字段,并注意到这些字段存在某些对齐问题.
代码如下 -
<textarea rows="4" cols="30" name="details"></textarea>
<input type="text" name="username" size="30"></input>
Run Code Online (Sandbox Code Playgroud)
虽然两个字段的col宽度都设置为30,但我看到textarea宽度超出了文本框的宽度.我使用overflow:隐藏使用css作为textarea字段,然后尝试使用cols属性设置为25,26等来调整大小,但仍然看到对齐不完美(虽然非常接近).
问题 - 是否有更好的方法将表格中的所有字段对齐,使标准宽度为30cols?
所以我一直想在这里找出我的div的问题; 如何将我的设计转化为实际布局,而且我在研究或实施方面没有太多运气.在附加的链接中,您看到// PORTFOLIO,然后是一条延伸到内容区域边缘的线,这里有一条红线.现在我将// PORTFOLIO和红线div设置为特定的像素宽度,但我希望能够让两个div自动设置它们的宽度(第一个根据//自动设置宽度// TITLE占用,第二个占用容器中的剩余空间),因为我会让网站的其他部分做同样的事情,并且不想专门针对每个区域进行测量.非常欢迎任何建议,非常感谢!
我喜欢让我的表行为像块元素.我无法将其设置为宽度:100%,因为它确实有一些填充,这将导致100%+填充PX.
最后桌子做了我想要的,你能看到盒子阴影吗?但桌子上的孩子不喜欢那样^^
我猜THEAD里面的TH是问题所在.它们没有达到66%至33%的预期比率.
把招工广告...
对于这个令人难以置信的愚蠢问题感到抱歉,我觉得在大多数情况下我可以轻松地做到这一点,但我现在正在使用sharepoint并尝试做任何事情就是这样!
基本上我有一个230px宽的侧面导航(.menu-vertical),并且它旁边的div(.mainContent)我想要(填充到一边!)填充屏幕的其余部分.
不幸的是,大约有798个随机放置的div,跨度以及代码中的任何其他东西,我似乎无法在不破坏网站的情况下剥离,因此任何关于如何实现这一目标的建议将非常感谢,谢谢!
我需要获取变量高度和宽度元素#sentence的尺寸,以便更改与其相关的其他元素的尺寸.#sentence在浏览器窗口中居中,无论其内容如何,都确定其高度和宽度.我的代码看起来像这样:
HTML
<body>
<div id="wrapper">
<div id="cell">
<span id="sentence">
sentence
</span>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
CSS
body, html {
font-size: 18pt;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#wrapper {
width: 100%;
height: 100%;
display: table;
text-align: center;
}
#cell {
display: table-cell; vertical-align: middle;
}
#sentence {
display: inline-block;
background-color: #abc;
padding: 1em;
}
Run Code Online (Sandbox Code Playgroud)
JS
$(document).ready(function(){
var h = $("#sentence").height();
alert(h);
});
Run Code Online (Sandbox Code Playgroud)
当我尝试获取.height()或.width()的#sentence,我回来不一致的值.通常对于28的高度,但有时它会回到19.对于宽度,我得到84或有时52.
我想也许差异是由于滚动条暂时出现然后在页面加载时消失.我尝试添加overflow: hidden;到html并body …
我需要将div宽度设置为浏览器默认宽度.这个div包含'ul'和'li'元素.我需要增加div宽度当'li'内容增加时,当浏览器最小化时,这个li元素不应该下降(现在发生)而不是浏览器应该提供horizantal bar.有帮助吗?
Div结构是
<div style="position:relative;border:1px solid red; line-height:16px;width:100%">
<ul style="position:relative;background:green;height:30px; width:100%;list-style:none; margin:0;">
<li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>
<li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>
<li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>
<li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud) 我有这个代码,显示内容,如果点击.问题是,如果屏幕/设备宽度最大为500px,则此功能应该是可用的.我该怎么做呢?
$(function () {
$('.row1').hide();
$('#show').toggle(function () {
$('.row1').slideDown("slow");
$(this).attr("src", "bilder/cancel.png");
}, function () {
$('.row1').slideUp("slow");
$(this).attr("src", "bilder/add.png");
});
});
Run Code Online (Sandbox Code Playgroud)
更新:我没有很好地解释我想要完成的任务:/ II希望此图像在屏幕宽度超过500px时显示.当宽度小于500px时,我想要一条线,说点击这里显示图像,然后显示图像
首先,我对CSS很新,所以我希望我没有做过任何可怕的愚蠢行为.
基本上,我有一个设计,我正在使用Pure构建,宽度在谷歌Chrome中播放,而它在Firefox中的工作原理.
这是我所做的链接:http://egf.me/Rushd/rushdtest.html和截图:
如果你看一下网页源代码,我还没有真正做了什么,我自己的CSS改变什么(我评论了这一切作为检查以防万一),所以我我莫名其妙地使用纯猜测错误,因为他们自己的网站在Chrome上呈现良好.
此外,使用Chrome的开发工具检查元素显示应该彼此相邻的div元素的宽度加起来小于父元素的宽度.似乎没有任何缓冲区或填充.此外,如果我手动减少宽度非常小,Chrome似乎神奇地修复了一切.
width ×10
css ×6
html ×6
jquery ×3
textbox ×2
alignment ×1
column-width ×1
css-tables ×1
height ×1
screen ×1
sharepoint ×1
show-hide ×1
space ×1
textarea ×1
wpf ×1
xaml ×1
yui-pure-css ×1