0

我正在做一个简单的 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 链接

编辑 文本将具有不同的长度，并且“ note1 ” DIV 元素将可调整大小。因此，非常感谢任何可以帮助我的解决方案。

4

4 回答 4

3

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

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   
}
于 2013-06-27T09:07:22.753 回答
0

给id内容

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

或课堂笔记内容

.notes-content{
   padding:5px 5px 5px 5px;
   // top right bottom left
}
于 2013-06-27T09:08:13.837 回答
0

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

不是显示半行吗？

如果是这样，您需要根据要在此 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;
}
于 2013-06-27T09:13:14.430 回答
0

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

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

小提琴

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

于 2013-06-27T09:17:18.493 回答