我有一个无序列表,其中包含3个列表项(在我的示例中表示为3个绿色框).每个方框都有一个图像和3个div(标题,位置,价格).我只关心每个盒子的标题div.
如果标题足够长,以便产生2行,我希望顶行总是短于底线.我在这里看到的演示站点显示了错误设置的方框1和2,方框#3显示了正确的设置.
我遇到了麻烦......这可能需要js来确定行长度,然后将底线设置得更长.屏幕分辨率可能会起作用,但我不能在不同的屏幕尺寸上使线条一致吗?
这是列表项之一,我对div"titlebox"感兴趣:
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is longer than this line</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</li>
Run Code Online (Sandbox Code Playgroud)
任何帮助都很棒,谢谢!!
附上截图: 
我仍然遇到一个长期存在的问题.简而言之,我的网站在无序列表中有3个列表项.在我的演示中,列表是绿色框.每个列表项包含一个图像和3个div(标题框,位置框,价格框).我这里只关注标题框.我的演示站点在这里:
您可以看到每个标题框如何具有不同长度的文本,这会推动位置/价格下降.我把彩色标题框变成了灰色所以你可以看到它们.我希望所有标题框高度与最大标题框的高度相匹配.我附上了我想要的截图.
这是CodePen中的演示链接 - 你能帮忙调整一下吗? http://codepen.io/anon/pen/azJKYM
主要的无序列表项(包含所有3个绿色框)具有CSS:
.list
{
width: 100%;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
Run Code Online (Sandbox Code Playgroud)
单个列表项(绿色框)有css:
.list__item
{
width: 32%;
float: left; /* 10 */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 0.625em;
padding-bottom: 0.825em;
margin-left:1%;
margin-right:0%;
position:relative;
line-height:40px;
}
Run Code Online (Sandbox Code Playgroud)
并且标题框有CSS:
.titlebox{
width: 80%;
height: 10%;
display: inline-block;
font-size: 4.2vh;
font-family: Garamond;
color: #002000;
text-align: center;
line-height: 35px;
font-weight:bold;
margin-top: 5%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: …Run Code Online (Sandbox Code Playgroud) 我正在尝试绑定一个标签,以显示在RangeSlider的上下拇指上方.
无论用户在哪里滑动,标签的位置应始终保持在各自的拇指上方.像这样:
我的方法是将侦听器连接到每个拇指,这样我就可以在每次用户滑动时将标签设置为具有适当的X/Y坐标.但是,当我运行以下代码时,我似乎无法通过css选择器获得对个人拇指的引用.
我按照这篇文章,但这只使用一个拇指,因此很容易参考.你如何在我的上下文中正确使用CSS选择器,或者如果我的存在缺陷,那么更好的方法是什么?
调节器
public class SliderDemoController implements Initializable {
@FXML
private RangeSlider range;
@Override
public void initialize(URL location, ResourceBundle resources) {
Pane thumb = (Pane) range.lookup(".range-slider .low-thumb");
System.out.println(thumb); // <-- Prints null
}
}
Run Code Online (Sandbox Code Playgroud)
主要
public class SliderDemoMain extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage initStage) throws IOException {
FXMLLoader loader = new FXMLLoader(Drag.class.getClassLoader().getResource("sliderdemo.fxml"));
Parent root = loader.load();
Scene scene = new Scene(root);
Stage …Run Code Online (Sandbox Code Playgroud) 我的网站上有一个自定义的CSS按钮,可以在Chrome中正常旋转,但是Internet Explorer 11在悬停时会消失,而不是旋转.
你可以在这里看到按钮(这是蓝色的"立即搜索!"按钮):LINK
当我从索引文件中删除此行时,Chrome将产生与IE相同的错误效果,因此它让我觉得这会导致IE的问题.
<script src="http://taskbasket.net/gallery/themes/matheso/js/modernizr.custom.js"></script>
Run Code Online (Sandbox Code Playgroud)
你能提供解决方案吗?谢谢.
html css internet-explorer google-chrome internet-explorer-11
html ×3
css ×2
controlsfx ×1
height ×1
javafx ×1
javascript ×1
jquery ×1
list ×1
rangeslider ×1