小编Nov*_*ova的帖子

如何使顶线短于底线(在div内)

我有一个无序列表,其中包含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)

任何帮助都很棒,谢谢!!

附上截图: 截图

html javascript jquery string-length

5
推荐指数
1
解决办法
363
查看次数

如何根据文本内容使所有div的高度相同?

我仍然遇到一个长期存在的问题.简而言之,我的网站在无序列表中有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)

html css height list

4
推荐指数
1
解决办法
6734
查看次数

如何单独引用RangeSlider的每个Thumb(ControlsFX)

我正在尝试绑定一个标签,以显示在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)

javafx rangeslider controlsfx

2
推荐指数
1
解决办法
822
查看次数

CSS效果适用于Chrome,但不适用于IE 11

我的网站上有一个自定义的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

1
推荐指数
1
解决办法
785
查看次数