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

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

试试这个http://jsfiddle.net/cy33jjo1/1/

只需在 css

中更改此设置

.tab-content {
  background: #fff none repeat scroll 0 0;
  left: 127px;
  padding: 15px;
  position: absolute;
  top: 24px;
  width: 60%;
}

Answer 2

无法正常工作的原因有很多，具体如下：

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 的右边，这样它 覆盖 [=23= 的其余部分].

因此，您必须知道 .tab-links 的 width（我们在这里不知道），因此您可以将 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.

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

Make my tabs be on the left with my content next to it on the right

html

css

tabs