更新
解决这个问题,是内部最需要拥有自动高度的,因为它有一个固定的高度,我完全被忽视
我已经像我搜索过的许多其他人一样 – 试图使一个可扩展的DIV根据其内容的长度来扩展.我和现在看到的一样,因为我有来自外部控制器的变量来显示,但除此之外我想要实现的是一样的.
我创建了一个包含我在后台重复的图像的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的高度,所有的动作,因为它应该.
但是,正在得到question_background来调整它的内部内容高度,这是我的问题.
我已经尝试过各种版本的清除:两个和浮动的不同的盒子,都无济于事…我复杂了吗?
我究竟做错了什么?我该如何实现?
欣赏我收到的任何帮助.