html - 将标题 float 到两个不同的 div

Question

这是一个演示问题的 fiddle http://jsfiddle.net/mjmitche/MMWXj/1/我有一个“关于”部分和一个“技能”部分。如果您单击其中任一部分的标题，则会出现一个显示相关内容的下拉菜单。如果“关于”是打开的，那么如果你点击打开“技能”，它将关闭。这里“关于”已被点击...

 About

   this is About content revealed by click

 Skills

这里“技能”已经被点击了

About
Skills

this is Skills content revealed by click

我希望它们并排 float ，而不是让“关于”标题和“技能”标题相互堆叠，但每个 div 中的内容行为相同，就像这样(如果技能标题已被点击)

About Skills

   this is Skills content revealed by click 

这是基本的 html 结构(我暂时留下了一些不必要的部分，因为担心一旦我找到问题的解决方案，将这些部分重新插入会改变一切)。

如果你能解释如何实现这一点，我将不胜感激......

<div id="who">
    <h1 class="who closed">About</h1>
    <div class="content">
      <div id="latest" class="three_columns">

        <p>
          <strong>Boo!</strong>
        </p>

      </div>
    </div>
    </div>

 <div id="what">
    <h1 class="what closed">Skills</h1>
    <div class="content">
      <div id="consulting" class="three_columns">

        <p>
          <strong>Boo2!</strong>
        </p>

      </div>
    </div>
    </div>

-- CSS

div.content { width: 500px; overflow: hidden; margin-left: auto; margin-right: auto;} /* This clears the floats of the child elements, see http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
div.three_columns { float: left; width: 290px; margin: 0px; padding: 10px;  }

#latest{
    padding-left: 30px;
}

/* General headline styles */
/*h1 { font-size: 40px; margin: 0px; padding: 10px; cursor: pointer; }
h2 { font-size: 16px; }*/

h1.who, h1.what, h1.how {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;

}

h2.who, h2.what, h2.how {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: center;
}

.blue { color: #00b9f1; }
.green { color: #99cc00; }

/* General link styles - Colors: pink #ec008b, blue #00b9f1, dark gray #222, light gray #ebebeb; */
/*a { color: #222222; text-decoration: none; }
h1.hover, a:hover { color: #ec008b; cursor: pointer; }
h1.active, a:active { color: #00b9f1; cursor: pointer; }*/

/* General list styles */
ul { margin: 0px; padding: 0px; }
ul li { margin: 0px; padding: 0px; list-style: none; }


#cent {

    margin-left: auto;
    margin-right: auto;
    width:
}

/*** Styles for the main content sections ***/
div#who, div#what, div#how { height: 100%; margin: 0px; padding: 0px; }

JS

$(function() {

    // Hide all closed sections
    $(".closed").next().hide();

    // Add slide functions to all sections (h1 elements)
    $("h1").click(function () {
        if($(this).is('.closed')) {
            $(".open").delay(200, function() { $(this).next().slideUp("slow"); });
            $(this).delay(200, function() { $(this).next().slideDown("slow"); });
            $("h1").deactivateElement();
            $(this).activateElement();
        }
        else if($(this).is('.open')) {
            $(this).delay(200, function() { $(this).next().slideUp("slow"); });
            $(this).deactivateElement();
        }
    });

    // Add a function to toggle the CSS styles
    $("a#style_switcher").click(function () { flag = !flag; dark.disabled = flag; });

    // Add hover functions to all sections (h1 elements)
    $("h1").hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });


    // Delay the call to (slide) functions
    // => http://james.padolsey.com/javascript/jquery-delay-plugin/
    $.fn.delay = function(time, callback) {
        jQuery.fx.step.delay = function() {};
        return this.animate( { delay: 1 }, time, callback);
    }

    // Set an element class to 'open' or 'closed'
    $.fn.activateElement = function() { switchClasses($(this), 'open', 'closed'); }
    $.fn.deactivateElement = function() { switchClasses($(this), 'closed', 'open'); }

    // Do this at start
    initialize();
    $(".who").delay(600, function() { $(this).next().slideDown("slow"); });
    $(".who").activateElement();
});


// Initialization function
function initialize () {
    flag = true;
    dark = document.getElementById("dark_css");
    dark.disabled = flag;

    // Set year in copyright section
    document.getElementById('year').innerHTML = (new Date()).getFullYear();
}

// Utility function for switching/toggling classes
function switchClasses (element, classToAdd, classToRemove) {
    element.addClass(classToAdd);
    element.removeClass(classToRemove);
    // De/Activate the given element
    (classToAdd == 'open') ? element.addClass('active') : element.removeClass('active');
}

Answer 1

将最后一个和第一个 CSS 类更改为:

/*** Styles for the main content sections ***/
div#who, div#what, div#how 
{ 
   height: 100%;
   margin: 0px;
   padding: 0px;
   float:left; // new
}

div.content 
{ 
   position:absolute; //new
   width: 500px;
   overflow: hidden;
   margin-left: auto;
   margin-right: auto;
}

已编辑!