html - 让我的标签在左边，我的内容在右边

Question

我试图让我的标签在左边而不是在顶部，内容在它旁边。

我怎样才能用我已有的东西做到这一点。

这是我的:

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
});

body{
    background-color: black;
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
    float: left;
}
 
    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }
 
    .tab-links li {
        margin:0px 5px;
        /* float:left; */
        list-style:none;
    }
 
        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            background:#7FB5DA;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
            text-decoration:none;
        }
 
        .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }
 
    li.active a, li.active a:hover {
        background:#fff;
        color:#4c4c4c;
    }
 
    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        background:#fff;
        width: auto;
    }
 
        .tab {
            display:none;
        }
 
        .tab.active {
            display:block;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>
 
    <div class="tab-content">
        <div id="tab1" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>
 
        <div id="tab2" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
 
        <div id="tab3" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>
 
        <div id="tab4" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
    </div>
</div>

http://jsfiddle.net/cy33jjo1/

要得到这样的东西:http://codepen.io/joshadamous/full/wJKzv/

谢谢。如果我不够清楚，请告诉我。

Answer 1

无法正常工作的原因有很多，如下所示:

1) 不申请display:inline-block;和 float:left;到你箱子里的容器.tabs

2) 改为应用 display:inline-block;和 float:left;到内部元素。在你的情况下 .tab-links和 .tab-contents .

3) 还有 ul 默认采用一些边距和填充，即使您没有指定也是如此。所以让他们成为0px's .

4) 现在你想要你的 .tab-content在 .tab-links 的右侧这样它涵盖了width的其余部分.

因此，您必须知道 width的 .tab-links (我们在这里不知道)，因此您可以使用 width对于 .tab-content喜欢width:calc(100% - {width_Of_TabLinks} px); .

5) 我们将使用JQuery 来了解.tab-links 的宽度 并进一步使用它。

Working : Demo

HTML:无变化

CSS

body{
    background-color: black;
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    /*display:inline-block; REMOVED*/
    /*float: left; REMOVED*/
}

/*----- Tab Links -----*/
.tab-links /* ADDED */
{
    margin:0px;
    padding:0px;
    display:inline-block;
    width:auto;
    float:left;
}

/* Clearfix */ 
.tab-links:after {
    display:block;
    clear:both;
    content:'';
}

.tab-links li {
    /*margin:0px 5px; REMOVED */
    list-style:none;
}

.tab-links a {
    padding:9px 15px;
    display:inline-block;
    background:#7FB5DA;
    font-size:16px;
    font-weight:600;
    color:#4c4c4c;
    transition:all linear 0.15s;
    text-decoration:none;
}

.tab-links a:hover {
    background:#a7cce5;
    text-decoration:none;
}

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    background:#fff;
    width: auto;        
    /*Added*/
    float:left;
    display:inline-block;        
}

.tab {
    display:none;
}

.tab.active {
    display:block;
}

JQuery

 //Added this two lines to your JQuery

 var wTabLinks = $(".tab-links").outerWidth();
 $(".tab-content").css("width", "calc(100% - " + wTabLinks + "px - 30px)");

Note: You can see -30px in above JQuery code, that is because of padding:9px 15px; in your .tab-content {....}. Here you have gave 15px to left and right padding to Tab Content.