Question

我正在开发一个简单的HTML，CSS设计。需要一些帮助。
我需要在底部填充，但我被困在我必须添加填充的地方。

PS：底部的JSFiddle链接。

HTML代码

<div id="note1" class="notes-note">

    <div id="toolbar1" class="notes-toolbar">
        <div class="notes-title">Title</div>
    </div>
    <div id="content1" class="notes-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

</div>

CSS

/* Notes */
.notes-note {
    width: 175px;
    height: 100px;
    margin: 5px;
    background-color: #FFFDD0;
    overflow: hidden;
}

/* Toolbar */
.notes-note .notes-toolbar {
    background-color: #E6E4BC;
    height: 20px;
    padding: 6px;
}

/* Title on the Toolbar */
.notes-note .notes-toolbar .notes-title {
    float: left;
    font-weight: bold;
    overflow: hidden;
}

/* Notes Content */
.notes-note .notes-content {
    overflow: hidden;
    font-size: 0.9em;
    margin: 10px;
}

这是JSFiddle的链接的 JSFiddle Link

修改文本长度不变，“ note1 ” DIV元素也可以调整大小。因此，非常感谢任何有助于我的解决方案。

Answer 1

简单的解决方案是在底部放置边框

http://jsfiddle.net/davidja/ZteLW/6/

.notes-note {
width: 175px;
height: 100px;
margin: 5px;
background-color: #FFFDD0;
overflow: hidden;
border-bottom: solid 10px #fffdd0; // Add This
}

或者莱斯特先生指出你可以使用透明边框。但是你需要使用css box-sizing来定位框内的边框 - http://jsfiddle.net/davidja/ZteLW/10/

.notes-note {
width: 175px;
height: 100px;
margin: 5px;
background-color: #FFFDD0;
overflow: hidden;
border-bottom: solid 10px transparent;   //add this
box-sizing : border-box ; //add this   
}

Answer 2

将其提供给id内容

#content1{
   padding:5px 5px 5px 5px;
}

或课堂笔记内容

.notes-content{
   padding:5px 5px 5px 5px;
   // top right bottom left
}

Answer 3

您没有说明为什么需要填充底部。

是不是要显示一半的线？

如果是这样，您需要根据要在此100px高度中看到的行数设置行高：

例如

http://jsfiddle.net/ZteLW/4/，但如果你有不同的字体大小，这种方式就不稳定了。因为你在像素中设置高度，所以线高也应该在像素中。如果它更符合您的需求，请尝试这个：http://jsfiddle.net/ZteLW/7/

/* Notes */
.notes-note {
    width: 175px;
    height: 100px;
    margin: 5px;
    background-color: #FFFDD0;
    overflow: hidden;
    line-height:18px;
}

Answer 4

也许你想将.notes-note类包装在容器中 - 并给容器底部填充。

.container
{
   background: #fffdd0;
   padding-bottom: 10px;  
   width: 175px;   
}

<强> FIDDLE

此外，我在.notes-note类的高度添加了一些像素，以便最初不会剪切文本。

需要在DIV Elements底部填充

4 个答案: