html – 可扩展的DIV高度以适应内部内容 – 我做错了什么?
发布时间:2020-12-14 18:59:14 所属栏目:资源 来源:网络整理
导读:更新 解决这个问题,是内部最需要拥有自动高度的,因为它有一个固定的高度,我完全被忽视 我已经像我搜索过的许多其他人一样 – 试图使一个可扩展的DIV根据其内容的长度来扩展.我和现在看到的一样,因为我有来自外部控制器的变量来显示,但除此之外我想要实现的是
更新
解决这个问题,是内部最需要拥有自动高度的,因为它有一个固定的高度,我完全被忽视 我已经像我搜索过的许多其他人一样 – 试图使一个可扩展的DIV根据其内容的长度来扩展.我和现在看到的一样,因为我有来自外部控制器的变量来显示,但除此之外我想要实现的是一样的. <div id="feedback_question" class="span-14"> <div id="title_bar"> <img id="brand_image" src="<?php echo img_path() . $title_row[0]->filename;?>"> <div id="brand_text"> <div id="brand_title"><?php echo $title_row[0]->name;?></div> <div id="brand_description"><?php echo $title_row[0]->description;?></div> </div> </div> <div id="background_stretch"> <div id="question_background"> <div id="question_tabs" class="span-14"> <ul id="tab_list"> <?php for($i = 1; $i <= $maxQuestions; $i++) { ?> <li class="tab" id="tab_<?php echo $i; ?>"> Q<?php echo $i; ?> </li> <?php }; ?> </ul> <div class="question_body"> <!--Load question template here --> <?php echo $questions?> </div> </div> </div> <div id="bottom_section"> <div id="bottom_button_holder"> <div id="next_button"></div> </div> </div> <br class="clear" /> </div> <div id="background_bottom"> <a id="invite_button" href="#"><img src="<?php echo img_path(); ?>feedback/question/invite_button.png"/></a> </div> 这里是我的CSS – .clear { clear: both; } .video_multi,.video_multi,.image_multi,.text_multi,.text_multi { display: none; } #feedback_question { background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg.png') no-repeat scroll; height: auto; } #title_bar { height: 170px; border: 1px solid #EBDDE2; background: white; width: 501px; margin-top: 41px; margin-left: 8.5px; } #brand_image { height: 120px; width: 170px; border: 2.5px solid #EBDDE2; margin: 20px; float: left; } #brand_text { float: right; width: 283px; height: 150px; padding-top: 20px; } #brand_title { font-size: 28px; color: #4365c6; } #brand_description { width: 280px; } #question_tabs { background: transparent url('<?php echo img_path(); ?>feedback/question/tab_bar.png') no-repeat scroll; height: 40px; padding-top: 22px; } #question_background { border-left: 1px solid #057eb5; border-right: 1px solid #057eb5; border-top: 1px solid #057eb5; height: 335px; width: 501px; margin-bottom: -12px; overflow: hidden; } #tab_list { margin-bottom: 5px; } .tab { background: transparent url('<?php echo img_path(); ?>feedback/question/question_tab_sprite.png') no-repeat scroll 0 0; cursor: pointer; display: inline; height: 54px; list-style: none outside none; margin-right: -3px; padding-left: 16px; padding-right: 13px; padding-top: 13px; width: 29px; color: white; font-weight: bold; } .tab_hover{ background-position: 0px -32px; } .tab_selected { background-position: 0px -64px; color: #0881ba; } #bottom_button_holder { background: transparent url('<?php echo img_path(); ?>feedback/question/question_button_bg.png') no-repeat scroll; height: 47px; width: 503px; display: block; } #next_button { background: transparent url('<?php echo img_path(); ?>feedback/question/next_button.png') no-repeat scroll; height: 33px; width: 98px; display: block; position: relative; left: 375px; top: 5px; cursor: pointer; } .question_body { height: 270px; width: 500px; } .question_image_holder { list-style: none; display: inline; margin-right: 15px; width: 100px; } .question_answer_box { width: 350px; padding-left: 100px; } .answer { position: relative; bottom: 45px; } .question { margin-left: 5px; } .answer_text { width: 100px; } .answer_list_item { list-style: none; } #background_stretch { background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_repeat.png') repeat-y scroll 0 0; display: block; height:auto; padding-left: 8.5px; } #background_bottom { background: transparent url('<?php echo img_path(); ?>feedback/question/question_bg_bottom.png') no-repeat scroll; display: block; height: 90px; width: 520px; padding-left: 4px; padding-top: 20px; } #bottom_section { position: relative; } #invite_button { background: transparent url('<?php echo img_path(); ?>feedback/question/invite_button.png') no-repeat scroll; display: block; height: 52px; width: 512px; position: relative; } 无论如何,正如你应该能看到的那样,这是我的background_stretch和question_background div的内容,这一切都很好,如果我改变question_background的高度,所有的动作,因为它应该. 我已经尝试过各种版本的清除:两个和浮动的不同的盒子,都无济于事…我复杂了吗? 我究竟做错了什么?我该如何实现? 欣赏我收到的任何帮助. 解决方法
使元素“可扩展”而不是height:auto;您应该使用
overflow: auto; (更改
float 时).但是,如果你不接触高度,它将自动适应 – 如@kokos所说. BTW:你想要扩展哪个Div? (如果我猜想你想要使用feedback_question类做div)
有用的提示:将您的代码添加到JsFiddle (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |