html退出往右靠,html – 将div对齐到右边,防止容器崩溃

我无法尝试将事件信息类文本作为垂直列表与事件日历的右侧对齐.将事件列表向右浮动似乎完全崩溃了我的文本,这是我不想要的.这是我的HTML和CSS：

.workshop-events {

width: 100%;

background-color: #f2f2f2;

padding: 1px 20px;

/*padding: 20px;*/

}

.calendar {

width: 75px;

display: table-cell;

}

.calendar .month {

text-transform: uppercase;

font-size: 16px;

border: 1px solid #b2b2b2;

padding: 3px 0;

background: #FFF;

}

.calendar .day {

font-size: 30px;

font-weight: 500;

border: 1px solid #b2b2b2;

border-top: none;

padding: 7px 0;

background: #FFF;

}

.calendar .day {

font-size: 30px;

font-weight: 500;

border: 1px solid #b2b2b2;

border-top: none;

padding: 7px 0;

background: #FFF;

}

.events-info {

font-weight: bold;

font-size: 14px;

}

最佳答案

您只需将日历框浮动到左侧即可.为了获得更好的结果,将所有events-info按钮包装到一个容器中(以避免文本换行到日历框下面的新行,请参阅演示).

HTML更新：

CSS更新：

.workshop-events {

overflow: auto; /*fix possible collapses caused by floating*/

}

.calendar {

float: left;

margin-right: 20px;

}

.events-container {

overflow: auto; /*prevent the text to wrap below the calendar*/

}

.workshop-events {

width: 100%;

background-color: #f2f2f2;

padding: 20px;

}

.calendar {

width: 75px;

display: table-cell;

}

.calendar .month {

text-transform: uppercase;

font-size: 16px;

border: 1px solid #b2b2b2;

padding: 3px 0;

background: #FFF;

}

.calendar .day {

font-size: 30px;

font-weight: 500;

border: 1px solid #b2b2b2;

border-top: none;

padding: 7px 0;

background: #FFF;

}

.calendar .day {

font-size: 30px;

font-weight: 500;

border: 1px solid #b2b2b2;

border-top: none;

padding: 7px 0;

background: #FFF;

}

.events-info {

font-weight: bold;

font-size: 14px;

}

/*NEW RULES BELOW*/

.workshop-events {

overflow: auto;

}

.calendar {

float: left;

margin-right: 20px;

}

.events-container {

overflow: auto;

}

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！