<div style="width:700px; height:400px;">
    <div style="margin:0px auto;height:100px;text-align:center;">
        <div class="leftWarp">{{chartCookie.leftName}}</div>
        <div class="rightWarp">{{chartCookie.rightName}}</div>
    </div>
    <div style="margin:0px auto">
        <div class="leftDiv">
            <h3>左边图表</h3>
            <div class="leftContent">
                <ul class="leftUl">
                    <li ms-repeat-item="chartLeft" ms-live-click="leftChange(item.$model)">{{item.name}}<div ms-class-chartok="item.id==chartCookie.leftId"></div></li>
                </ul>
            </div>
        </div>
        <div class="rightDiv">
            <h3>右边图表</h3>
            <div class="rightContent">
                <ul class="rightUl">
                    <li ms-repeat-item="chartRight" ms-live-click="rightChange(item.$model)">{{item.name}}<div ms-class-chartok="item.id==chartCookie.rightId"></div></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .leftDiv { width:342px; border:1px solid #ccc;float:left;margin-right:10px; }
    .rightDiv { width:342px; border:1px solid #ccc;float:left; }
    .leftDiv h3, .rightDiv h3 { text-align:center; height:45px; line-height:45px; font-weight:bold;font-size:14px; background: url(/Content/Themes/Base/Images/menu_blur.png) repeat-x; border-bottom:1px solid #ccc; }
    .leftDiv .leftContent, .rightDiv .rightContent { width:100%; height:300px; overflow:auto; }
    .leftUl li{ border:1px solid #ccc; background:url(/Content/Themes/Base/Images/Ico/desktopbg.png) 0px -22px repeat-x; border-radius:4px; float:left; width:140px; height:22px; line-height:22px; text-align:center; margin: 15px 10px 0px 15px; }
    .rightUl li { border:1px solid #ccc; background:url(/Content/Themes/Base/Images/Ico/desktopbg.png) 0px -22px repeat-x; border-radius:4px; float:left; width:140px; height:22px; line-height:22px; text-align:center; margin: 15px 10px 0px 15px; }
    .leftUl li:hover,.rightUl li:hover { background:#ccc; cursor:pointer; }
    .chartok{width: 32px;height: 32px;position: relative;top: -27px;left: -15px;cursor: pointer;background: url(/Content/Themes/Base/images/ico/isok.png) 0px 0px no-repeat;}
    .leftWarp { width:180px;border:1px solid #ccc;border-right:none;font-weight:bold;height:40px;line-height:40px;display:inline-block;border-top-left-radius:8px;border-bottom-left-radius:8px;margin-right:-6px; }
    .rightWarp { width:300px;border:1px solid #ccc;font-weight:bold;height:40px;line-height:40px;display:inline-block;border-top-right-radius:8px;border-bottom-right-radius:8px;margin-left:0; }
</style>