容器中可调整大小的内容div

Question

我尝试在CSS中实现以下内容。 包含静态标签div和内容div的容器，当页面变小时，内容div将更小。 标签div应该保持在同一位置。

澄清一张图片。

我的代码现在：

.tabs {
padding-left: 30px;
padding-right: 30px;
width: 100%
}

.tabss {
clear: none;
width: 300px;
float: left;
}

.tabss-content {
position: relative;
left: 30%;
}

如果有人可以帮助我，我将不胜感激。

Answer 1

这是你在找什么？

package stackoverflow35769423;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.OutputStream;

import javax.xml.bind.JAXBContext;
import javax.xml.bind.JAXBException;
import javax.xml.bind.Marshaller;

import stackoverflow35769423.jaxb.ObjectFactory;
import stackoverflow35769423.jaxb.Output;
import stackoverflow35769423.jaxb.ResultType;

public class CreateResultFile {

    public static void main(String[] args) {    
        try {
            (new CreateResultFile()).writeFile();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (JAXBException e) {
            e.printStackTrace();
        }
    }

    private void writeFile() throws JAXBException, FileNotFoundException {  
        OutputStream os = new FileOutputStream("files" + File.separator + "output.xml");
        ObjectFactory factory = new ObjectFactory();
        JAXBContext jaxbContext = JAXBContext.newInstance(factory.getClass().getPackage().getName());
        Marshaller jaxbMarshaller = jaxbContext.createMarshaller();
        jaxbMarshaller.setProperty(Marshaller.JAXB_FORMATTED_OUTPUT, true);

        Output output = factory.createOutput();
        output.setOption("abc");
        output.setRefid("8789");

        Output.Response reponse = factory.createOutputResponse();
        reponse.setResponsecode("1234");
        reponse.setResponsedetails("xyz");
        output.setResponse(reponse);

        Output.Result result = factory.createOutputResult();
        ResultType resultFront = factory.createResultType();
        resultFront.setContainimage("Yes");
        resultFront.setContaindetail("No");

        ResultType resultBack = factory.createResultType();
        resultBack.setContainimage("Yes");
        resultBack.setContaindetail("Yes");

        result.setFront(resultFront);
        result.setBack(resultBack);
        output.setResult(result);

        jaxbMarshaller.marshal(output, os);
    }
}

body {
  margin: 0;
}
ul {
  list-style: none;
  padding: 10px;
}
.tabs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  background-color: blue;
}
.content {
  padding: 10px 10px 10px 150px;
  background-color: green;
}