Question

我有我的div代码。我想在里面点一些文字。文本必须与div的左侧曲线对齐。这怎么可能？谢谢！

以下是div的代码：

#cv {

position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;

padding: 10px;


}

Answer 1

我相信你希望文本跟随半圆，而不只是沿着直边留下一个普通的对齐。使用简单的css属性（但）可能无法实现。然而，有一些像这样的hacky技术： http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes

甚至有一些工具可以帮助你，比如这个： http://www.csstextwrap.com/

Adobe推出一个新的css属性来包装文本： http://www.adobe.com/devnet/html5/articles/css3-regions.html

它应该已经在Chrome Canary中提供，但我认为这对你今天没用。我想今天你将不得不做一个黑客...

Answer 2

工作示例：http://jsfiddle.net/mQFK6/4/

您想要添加<p>来保留文字，然后将其50%向下移动到圆圈的中间，float它left

#cv {

position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;


}

p{
    top: 50%;
    position: relative;
    float: left;
    margin-left: 5px;
}

将文本内部对齐为半圆形的div

2 个答案: