Question

我是CSS的新手，现在在这段代码中工作了几个小时......

请有人在这里查看此代码http://jsfiddle.net/Nm2s8/2/并帮助我吗？当点击标题为＆＃34;打开＆＃34; div，它改变宽度，我不知道为什么:(

如果我在CSS中更改了类＆＃34; winhdn＆＃34;可见，宽度保持不变......对我来说这是一种疯狂的行为......

HTML：

<div class="resopt">
  <img class="resico" src="http://www.flashmyandroid.com/forum/images/smilie2/big_smile.png">
  <div id="win01" class="winshw">
    <div class="wintop">
      <span>Title 01</span>
    </div>
    <div class="restxt">
      estibulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipisc aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante.
    </div>
  </div>
</div>

<div class="resopt">
  <img class="resico" src="http://www.flashmyandroid.com/forum/images/smilie2/big_smile.png">
  <div id="win02" class="winhdn">
    <div class="wintop">
      <span>Title 02</span>
    </div>
    <div class="restxt">
      estibulum iaculis lacinia est. Proin dictum elementum velit. Fusce euismod consequat ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque sed dolor. Aliquam congue fermentum nisl. Mauris accumsan nulla vel diam. Sed in lacus ut enim adipisc aliquet. Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante.
    </div>
  </div>
</div>

CSS：

.resopt { display:inline-block; width:100%; margin:8px 0 12px 0; }
.resopt .resico { float:left; width:34px; height:34px; margin:-10px 6px 0 2px; }
.resopt .winshw { overflow:visible; min-height:100px; border:2px solid #389CF2; border-radius:8px 8px 0 0; background-color:#E6F2FF; background-image:url(http://www.google.com/mapfiles/zoom-minus.png); background-repeat:no-repeat; background-position:right 8px top 5px; background-position-x:99%; background-position-y:5px; }
.resopt .winhdn { overflow:hidden; height:26px; border:2px solid #389CF2; border-radius:8px 8px 8px 8px; background-color:#E6F2FF; background-image:url(http://www.abertay.ac.uk/media/zoom-plus.jpg); background-repeat:no-repeat; background-position:right 8px top 5px; background-position-x:99%; background-position-y:5px; }
.resopt .wintop { height:26px; border-bottom:1px solid #389CF2; cursor:pointer; }
.resopt .wintop span { font-size:15; font-weight:bold; line-height:26px; color:#585858; }
.resopt .restxt { padding:10px 14px 14px 14px; font-size:15px; text-align:justify; line-height:19px; color:#484848; background-color:#F9F9F9; }

JS：

jQuery(function($) {
  $(".wintop").click(function() {
    var newId = $(this).parent();
    if (newId.hasClass("winhdn")){
      newId.removeClass("winhdn");
      newId.addClass("winshw");
    } else {
      newId.removeClass("winshw");
      newId.addClass("winhdn");
    }
  })
});

谢谢！

Answer 1

更改溢出：可见溢出：隐藏在.resopt .winshw

中

.resopt .winshw
{
  overflow:hidden;
}

Answer 2

由于＆＃34;格式化上下文＆＃34; ：http://www.communitymx.com/content/article.cfm?cid=6BC9D

＆＃34;浮动不会相互重叠，浮动也不会与建立新的块格式化上下文的元素重叠。＆＃34;

                 .resopt .winshw { 
                 overflow:hidden; 
                 min-height:100px; 
                 /*.. */
                 }

See here

Answer 3

好吧，我使用“position：absolute”对图像进行了操作，并在标题文本中添加了额外的margin-left。结果如下：http://jsfiddle.net/Nm2s8/5/

.resopt .resico { position:absolute; width:34px; height:34px; margin:-10px 6px 0 2px;

.resopt .wintop span { margin-left:44px; font-size:15; font-weight:bold; line-height:26px; color:#585858; }

谢谢大家！希望这对未来的某些人有所帮助！

CSS - Div宽度与奇怪的行为

3 个答案: